将文本绑定到子对象的属性 [英] Bind text to property of child object

问题描述

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

Using knockout.js, is it possible to bind to a property of a child object of a JSON object from the server? Specifically, if I'm given an object from the server that looks like this:

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

我通过映射插件从这个javascript对象创建一个viewModel：

I create a viewModel from this javascript object via the "mapping" plugin:

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

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

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

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

I've assigned the value to be the selected property of my viewModel. This means, upon selecting an option, I can successfully query viewModel.selected.key() and viewModel.selected.value() in code and get the up-to-date values.

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

However, I am unable to bind the selected item's key or value data to be displayed on a span. For instance, this doesn't display my selected value:

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

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

Can I do what I want? Do I need to resort to using a real simple template to establish proper context (ie: selected)?

I有一个例子这里。我甚至尝试将子 c>选择的对象专门映射为一个可观察的对象，但没有运气（请参阅注释掉带有附加选项的映射调用）。

I have an example of the situation here. I've even tried specifically mapping the child selected object to be an observable itself, but with no luck (see commented out mapping call with the additional options).

推荐答案

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

You were on the right track with the mapping options. You would want selected to be an observable, so your UI updates when you make changes in the dropdown. In your case, it could even be empty.

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

One thing to note is that when the mapping plugin deals with an object like:

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

它将 key 和 value observables，但不是 select 。

It will make key and value observables, but not selected.

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

One other issue that you are having is that your first select specifies optionsValue: 'value'. This will cause it to write the value property of your object to selected instead of the object.

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

If you want to write the object itself, then you would want to completely remove the optionsValue binding.

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

Here is your fiddle with these updates: http://jsfiddle.net/rniemeyer/Dubu9/2/

这篇关于将文本绑定到子对象的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！