Question

我使用通过knockout绑定的<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);

Answer 1

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

model.options(options);

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

你最终得到了一个自我保持的可观察数组。（可观察数组实际上并没有阻止你将不是数组的东西放入其中）这不是你想要的，而是导致各种奇怪的错误。

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

选项更改时选择Knockout第一个选项

1 个答案: