Question

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

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

我通过“mapping”插件从这个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可观察，但不会selected。

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

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

以下是这些更新的小提琴： http://jsfiddle.net/rniemeyer/Dubu9/2/

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

1 个答案: