使用 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
对象本身是一个可观察对象,但没有运气(请参阅带有附加选项的注释掉的映射调用)。
最佳答案
您在映射选项方面走在了正确的轨道上。您可能希望 selected
是可观察的,因此当您在下拉列表中进行更改时,您的 UI 会更新。在您的情况下,它甚至可能是空的。
需要注意的一点是,当映射插件处理像这样的对象时:
selected: { key="", value=null }
它将使 key
和 value
可观察,但不是 selected
。
您遇到的另一个问题是您的第一个选择指定了 optionsValue: 'value'
。这将导致它将对象的 value
属性写入 selected
而不是对象。
如果您想自己编写对象,那么您可能希望完全删除 optionsValue
绑定(bind)。
这是您对这些更新的摆弄: http://jsfiddle.net/rniemeyer/Dubu9/2/
关于javascript - 将文本绑定(bind)到子对象的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6962532/