1

我是淘汰赛的新手，并尝试了我认为是一个简单的场景，但它只是不起作用。Neither of the two input's changes when the selection changes, and the select list does not initialise to the 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" />

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/

4

1 回答 1

2

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

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

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

如果您定义了一个create函数，那么您负责映射其值，因此您需要ko.mapping.fromJS在 create 函数内部调用 withoptions.data以映射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。

于 2013-07-18T04:58:28.577 回答