javascript - 将文本绑定(bind)到子对象的属性

Question

使用 knockout.js，是否可以从服务器绑定(bind)到 JSON 对象的子对象的属性？具体来说，如果我从服务器得到一个如下所示的对象:

var obj = {
    list: [ { key: "a", value: 1 },
            { key: "b", value: 2 },
            { key: "c", value: 3 }        
        ],
    selected: {
        key: "",
        value: null  
    }
};

我通过“映射”插件从这个 javascript 对象创建了一个 viewModel:

var viewModel = ko.mapping.fromJS(obj);

然后我绑定(bind) list到 <select>像这样标记:

<select data-bind="options: list, optionsText: 'key', 
                   optionsValue: 'value', 
                   value: selected">
</select>

我已将值指定为 selected我的 viewModel 的属性。这意味着，在选择一个选项后，我可以成功查询 viewModel.selected.key()和 viewModel.selected.value()在代码中获取最新值。

但是，我无法绑定(bind)所选项目的 key或 value要在跨度上显示的数据。例如，这不显示我选择的值:

<span data-bind="text: selected.value"></span>

我可以做我想做的事吗？我是否需要求助于使用真正简单的模板来建立适当的上下文(即:selected)？

我有一个例子的情况here .我什至尝试专门映射 child selected对象本身是一个可观察对象，但没有运气(请参阅带有附加选项的注释掉的映射调用)。

Answer 1

您在映射选项方面走在了正确的轨道上。您可能希望 selected 是可观察的，因此当您在下拉列表中进行更改时，您的 UI 会更新。在您的情况下，它甚至可能是空的。

需要注意的一点是，当映射插件处理像这样的对象时:

selected: { key="", value=null }

它将使 key 和 value 可观察，但不是 selected。

您遇到的另一个问题是您的第一个选择指定了 optionsValue: 'value'。这将导致它将对象的 value 属性写入 selected 而不是对象。

如果您想自己编写对象，那么您可能希望完全删除 optionsValue 绑定(bind)。

这是您对这些更新的摆弄: http://jsfiddle.net/rniemeyer/Dubu9/2/