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

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>

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

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

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

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

我的情况的例子在这里.我甚至尝试将子selected对象专门映射为一个可观察的本身,但没有运气(请参阅注释掉带有附加选项的映射调用).

Answer 1

您使用映射选项处于正确的轨道上.您可能希望selected成为可观察对象,因此当您在下拉列表中进行更改时,您的UI会更新.在你的情况下,它甚至可能是空的.

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

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

它会产生key和value观察,但不是selected.

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

如果要自己编写对象,则需要完全删除optionsValue绑定.

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