ドロップダウンの位置を変更して、値をスパンタグにバインドしようとしています。
私のJSファイルコードは
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();
}
};
});
私のhtmlは次のとおりです。
<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>
私はデュランダルとノックアウトを使用するのはまったく初めてです。selectedProperty().title を使用して PropertyList の値 title で span タグのテキストを設定しようとしていますが、ドロップダウンを 0 より大きい任意の位置に変更すると値が空白になります。位置 0 では不明と表示されます。selectedProperty().title を selectedProperty() に置き換えると、ref はスパン テキストに正しく出力されます。何か案は?