0

我正在尝试通过更改下拉列表中的位置来将值绑定到跨度标记。

我的 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>

我对使用 Durandal 和淘汰赛完全陌生。我正在尝试使用 selectedProperty().title 使用 PropertyList 中的值标题设置 span 标签的文本，但是当我将下拉列表更改为大于 0 的任何位置时，该值显示为空白。在 pos 0 它显示未知。如果我用 selectedProperty() 替换 selectedProperty().title ，那么 ref 会在跨度文本上正确打印出来。有任何想法吗？

4

2 回答 2

0

尝试将title跨度的文本封装在计算出的 observable 中。像这样：

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>

当您在绑定表达式本身中执行 observable 时，Knockout 可能有点古怪，它并不总是正确注册依赖项，以便在底层selectedPropertyobservable 更改时通知绑定（根据我的经验）。

于 2013-08-30T18:57:49.670 回答
0

一切都简单得多。optionsValue: 'ref'表示 selectedProperty() 为 0、1、2 或 3。因此selectedProperty().title未定义且文本为空。
如果你想使用selectedProperty().title只是optionsValue: 'ref'从选择中删除。

于 2013-08-30T19:53:52.910 回答