选项更改时选择的淘汰赛第一个选项答案

【问题标题】：Knockout first option selected when options change选项更改时选择的淘汰赛第一个选项
【发布时间】：2016-05-24 00:37:00
【问题描述】：

我正在使用<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 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);

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的问题是点击功能中的这一行：

model.options(options);

上一行已经更新了 observable 数组，但随后这一行尝试将 observable 数组设置为自身。（由于model.options 是options 的别名，所以这一行等同于options(options)，这显然是不正确的）。

你最终得到了一个可观察的数组，它可以容纳自己。（可观察数组实际上并不能阻止您将不是数组的东西放入其中）这不是您想要的，并且会导致各种奇怪的错误。

只需删除该行，您的代码就可以正常工作。 Working version.

【讨论】：