Knockout.js KnockoutJs映射到视图模型复杂属性

我对击倒和尝试我认为是一个简单的场景是陌生的，但它只是不起作用。选择更改时，两个输入都不会更改，并且选择列表不会初始化为selectedFormat

HTML:

<input type="text" data-bind="value: selectedFormat.id" />
<input type="text" data-bind="enable: selectedFormat.fields()[0].enabled" />

<select data-bind="options: formats, optionsText: 'name', value: selectedFormat" />

---

你几乎就在你的小提琴里，所有的部件都在那里，它们只需要连接起来

Te映射插件不会为包含Complex对象的属性自动创建可观察对象。因此，默认情况下，映射后，

selectedFormat

将不可见。因为您要写入

value:selectedFormat

它必须是可观察的，因此您需要一个自定义映射配置，使

selectedFormat

可观察：

var mapping = {
    'selectedFormat': {
        create: function(options) {
            return ko.observable(ko.mapping.fromJS(options.data));
        }
    }
}

如果您定义了一个

create

函数，那么您需要负责其值的映射，因此您需要使用

选项在create函数内调用
ko.mapping.fromJS
。data

来映射

selectedFormat

中的值

然后，您需要告诉

ko.mapping

将映射配置用于：

var vm = ko.mapping.fromJS(data, mapping);

现在只需要更改绑定，因为

selectedFormat

将是可观察的，所以需要使用

selectedFormat（）

获取其值：

---

演示

好的，谢谢，这使依赖项正常工作。但是选择列表仍然没有初始化为最初设置的selectedFormat，例如，如果我更改JSON数据，使selectedFormat={id:2，name:'Format 2'}，则选择列表仍然加载选中的格式1。

var vm = ko.mapping.fromJS(data, mapping);

<input type="text" data-bind="value: selectedFormat().id" />
<input type="text" data-bind="enable: selectedFormat().fields()[0].enabled" />

var mapping = {
    'selectedFormat': {
        create: function(options) {
           var selected = ko.utils.arrayFirst(options.parent.formats(), 
               function(item){
                   return item.id() == options.data.id;
            }); 
            return ko.observable(selected);
        }
    }
}