javascript - 使用 knockout 选择默认选项值

Question

我正在尝试根据用于填充选择选项的属性之一来选择默认选择选项。

此代码直接从@rneimeyer's fiddle 复制而来.我确实调整它来做我想做的事。

因此，我可以选择作为我的 observableArray。

var choices = [
    { id: 1, name: "one", choice: false },
    { id: 2, name: "two", choice: true },
    { id: 3, name: "three", choice: false }
    ];

function ViewModel(choices, choice) {
   this.choices = ko.observableArray(choices);
};

rneimeyer 的 fiddle 和我的 fiddle 之间的区别在于，我在 observableArray 内的对象上添加了 choice 属性，而不是为我们希望默认的选项设置单独的 observable。

这是 fiddle在我的尝试中。

现在我正在检查我的 select 元素标记中的 choice 属性是否为真。如果是，那么我想将 name 设置为 value 属性，使其成为默认值。

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

我用 simple data model in my fiddle 测试过这个在这里也可以正常工作。

我想我真正的问题是如何检查数据绑定(bind)中的 choice 属性。我看到 optionText 能够很好地访问 name 属性。不确定为什么 value 属性中的 choice 属性不一样。

Answer 1

我可能误导了某些人。另外，对于没有提及我正在使用的版本，我深表歉意。我目前正在使用 Knockout 3.0.0(稍后你会明白为什么这很重要)

另外，请注意，我并不是说@XGreen 的方法是错误的，但这并不是我想要的，这可能是因为我的解释不当。

让我首先尝试阐明我试图完成的事情。首先，我将拥有一个包含选项信息的对象数组。

[
 { id: 1, name: "one", choice: false },
 { id: 2, name: "two", choice: true },
 { id: 3, name: "three", choice: false }
]

现在，我想做的是将选择选项数据绑定(bind)到该数组，其中 choice true 是默认选择的选项。

除了将成为 observableArray 的数组本身之外，我不打算创建任何额外的 observable。

经过大量研究，我终于在 Knockout's Docs 中找到了 options 属性的 optionsAfterRender 属性。 .

<select data-bind="options: choices, 
                   optionsValue: 'name',
                   optionsAfterRender: $root.selectDefault">
</select>

那么 optionsAfterRender 真正做的是，在每个数组元素上它调用我设置的自定义函数来检查 choice 是否为真，并使选择选项的值具有是的。

请注意 ko.applyBindingsToNode 不 在我原来的 fiddle 中的版本 2.2.0 上工作。

function ViewModel(choices) {
   this.choices = ko.observableArray(choices);
    this.selectDefault = function(option,item){
        if(item.choice){
            ko.applyBindingsToNode(option.parentElement, {value: item.name}, item);
        }
    };
};
ko.applyBindings(new ViewModel(choices));

这是 fiddle