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

Question

我是淘汰赛的新手，我尝试了我认为很简单的场景，但它就是行不通。选择更改时，两个输入的变化都不是，选择列表不会初始化到SENSECTIOWFORMAT。

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" />

JS：

var data = {
    formats: [
        { id: 1, name: 'Format 1', fields: [
            { id: 1, enabled: true }, 
            ]}, 
        { id: 2, name: 'Format 2', fields: [
            { id: 1, enabled: false }, 
            ]}
        ], 
    selectedFormat: 
        { id: 2, name: 'Format 2', fields: [
            { id: 1, enabled: false }, 
            ]}
    }

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

ko.applyBindings(vm);

http://jsfiddle.net/paulbau/ZnqNN/1/

Answer 1

你几乎就在你的小提琴那里，所有的部分都在那里，他们只需要连接。

映射插件不会为包含复杂对象的属性自动创建可观察对象。因此，默认情况下，您的 selectedFormat 在映射后不会是可观察的。因为您想编写value: selectedFormat，所以它必须是可观察的，因此您需要一个自定义映射配置，使selectedFormat 可观察：

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

如果您定义了 create 函数，那么您负责映射其值，因此您需要在带有 options.data 的 create 函数内调用 ko.mapping.fromJS 以映射 selectedFormat 内的值也可观察。

然后你需要告诉ko.mapping 使用你的映射配置：

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

现在只需要更改您的绑定，因为selectedFormat 将是一个可观察的，因此您需要使用selectedFormat() 获取它的值：

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

演示JSFiddle.

如果您希望初始选择工作，那么您的映射需要通过 id 查找所选项目，而不是创建新对象：

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);
        }
    }
}

演示JSFiddle.