using durandal and knockout but I can't set span text from a drop down change - select

Question

I'm trying to bind a value to a span tag by changing the position on the drop down.
My JS file code is
define(['plugins/router', 'durandal/app', 'knockout', 'durandal/system'], function (router, app, ko, system) {
var Property = function (ref, title) {
this.ref = ref;
this.title = title;
};
var propertyList = [
new Property("0", "sample"),
new Property("1", "sasasfa"),
new Property("2", "jgpjijo"),
new Property("3", "uifhiuefh")
];
var items = ko.observableArray(propertyList);
var selectedProperty = ko.observable();
return {
router: router,
items: items,
selectedProperty: selectedProperty,
activate: function () {
router.map([
{ route: '', moduleId: 'viewmodels/propertydetails', title: 'Property Details', nav: true } ]).buildNavigationModel();
return router.activate();
}
};
});
My html is:
<div>
<div class="header-nav-items">
<ul class="nav" data-bind="foreach: router.navigationModel">
<li data-bind="css: { 'header-tab-active': isActive }">
<a data-bind="attr: { href: hash }, html: title"></a>
</li>
</ul>
</div>
<div style="background-color: #E05000; padding: 3px; height: 25px;">
<div style="float: left; margin-left: 10px; color: #ffffff;">
<span id="title" data-bind="text: selectedProperty() ? selectedProperty().title : 'Unknown'"></span>
</div>
<div style="float: right; margin-right: 10px;">
<select id="PropertyDDL" data-bind="options: items, optionsText: 'title', optionsValue: 'ref', value: selectedProperty, optionsCaption: 'Please select a property'"></select>
</div>
</div>
I'm completely new to using Durandal and knockount. I'm trying to set the text of the span tag with the value title from PropertyList using selectedProperty().title but the value appears blank when I change the drop down to any position greater than 0. At pos 0 it displays unknown. If I replace selectedProperty().title with selectedProperty() then the ref prints out correctly on the span text. Any ideas?

Answer 1

All is much more simple. optionsValue: 'ref' means that selectedProperty() is 0, 1, 2 or 3.
Therefore selectedProperty().title is undefined and text is empty.
If you want to use selectedProperty().title just remove optionsValue: 'ref' from select.

Answer 2

Try encapsulating the text for your title span in a computed observable. Like this:
var self = this;
self.titleText = ko.computed(function() {
var prop = self.selectedProperty();
return prop ? prop.title : 'Unknown';
});
<span id="title" data-bind="text: titleText"></span>
Knockout can be a bit quirky when you execute the observable in the binding expression itself, it doesn't always register the dependency properly such that the binding is notified when the underlying selectedProperty observable changes (in my experience).