我正在使用 <select>
框通过knockout绑定到包含ID和observableArray选项的计算值 . 但是,将项添加到选项数组时,选择始终更改为第一个选项 . 我不能为我的生活理解为什么 .
见下面的例子 . 单击按钮添加选项,并注意选择更改 . 如果我将select绑定更改为 value: optionId, options: options, optionsValue: 'id', optionsText: 'name'
,似乎不会发生这种情况,但我想知道为什么它不能正常工作 .
JSFiddle:http://jsfiddle.net/5m8yud69/2/
HTML:
</select>
<button data-bind="click: click">
Click me
</button>
JavaScript:var options = ko.observableArray();
options.push({ id: 1, name: "one" });
options.push({ id: 2, name: "two" });
options.push({ id: 3, name: "three" });
var optionId = ko.observable(3);
var option = ko.computed({
read: function () {
var id = optionId();
return ko.utils.arrayFirst(options(), function (option) { return option.id === id; });
},
write: function (value) {
optionId(value == null ? null : value.id);
}
});
var model = {
optionId: optionId,
option: option,
options: options,
click: function () {
options.push({ id: 4, name: "four" });
model.options(options);
}
};
ko.applyBindings(model);
1 回答
您的问题是点击功能中的这一行:
前一行已更新了可观察数组,但此行尝试将可观察数组设置为自身 . (由于
model.options
是options
的别名,因此该行相当于options(options)
,这显然是不正确的) .你最终得到了一个可观察的数组 . (可观察数组实际上并没有阻止你将不是数组的东西放入其中)这不是你想要的,而是导致各种奇怪的错误 .
只需删除该行,您的代码就可以正常工作 . Working version .