将文本绑定到子对象的属性

Question

使用 knockout.js，是否可以从服务器绑定到 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);

我将list 绑定到<select> 标签，如下所示：

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

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

但是，我无法绑定所选项目的 key 或 value 数据以显示在跨度上。例如，这不会显示我选择的值：

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

我可以做我想做的事吗？我是否需要使用真正简单的模板来建立适当的上下文（即：selected）？

我有一个here 的例子。我什至尝试将子 selected 对象专门映射为可观察对象，但没有运气（请参阅注释掉的映射调用以及其他选项）。

Answer 1

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

需要注意的一点是，当映射插件处理如下对象时：

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

它将使 key 和 value 成为 observables，但不是 selected。

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

如果您想编写对象本身，那么您需要完全删除 optionsValue 绑定。

以下是您对这些更新的看法： http://jsfiddle.net/rniemeyer/Dubu9/2/