选项更改时选择淘汰第一个选项
问题描述:
我正在使用<select>
框通过淘汰赛绑定到一个计算值包装ID和一个observableArray的选项。但是,将某个项目添加到选项数组时,选择始终会更改为第一个选项。我不能为我的生活理解为什么。选项更改时选择淘汰第一个选项
请参阅下面的示例。点击按钮添加一个选项并且注意选择改变。如果我将选择的绑定更改为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选项= 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);
答
你的问题是此行的点击功能:
model.options(options);
前一行已经更新了观察到的阵列,但随后该行尝试将观察到的阵列设置为自身。 (由于model.options
是options
的别名,因此该行相当于options(options)
,这更明显不正确)。
你最终会得到一个可观察的数组。 (Observable数组实际上并不阻止你将不是数组的东西放入其中)这不是你想要的,而是造成各种奇怪的错误。
只需删除该行,您的代码就可以正常工作。 Working version。