javascript - 与重复值绑定(bind)的 KnockoutJS 选项

Question

我正在使用 Knockout.js 构建一个简单的应用程序作为概念证明。由于我是 Knockout 的新手，这个问题中的代码可能远非完美并且表现出不良做法，所以如果是这种情况，请随时告诉我!

我正在使用 options绑定(bind)以生成 select 元素的内容:

<select data-bind="options: titles, optionsText: 'display', optionsValue: 'value'">
</select>

View 模型如下所示:

var ViewModel = function() {
    this.titles = ko.observableArray([]);
};

在 DOM 准备就绪时，我将一些值插入该可观察数组(每个值都是一个对象文字，代表一个“标题”，例如“先生”、“夫人”等):

var data = [
    { value: "Mr", display: "Default Value" },
    { value: "Miss", display: "Miss" },
    { value: "Mr", display: "Mr" },
    { value: "Ms", display: "Ms" }
];
ko.applyBindings(view);
for(var i = 0; i < data.length; i++) {
    view.titles.push(data[i]); //Push titles into observable array
}

不要问为什么会有两个值为“Mr”的对象，我要处理的数据就是这么来的。我无法改变它。但是，这就是导致问题的原因。我希望第一个对象代表所选选项，但事实并非如此。第三个对象代表 option 元素，它实际上最终成为默认选择。

我认为这是由于可观察数组导致 option 元素在循环迭代时一个一个地添加到 DOM 中。 Knockout 尝试通过检查其值来保留所选选项。第一次迭代后，所选 option 的值为“Mr”。在第三次迭代之后，还有另一个值为“Mr”的选项，因此 Knockout 认为它是先前选择的选项并选择了它。

这是一个 link to a fiddle证明问题。应选择“默认值”选项，但未选择。如果您再次单击该按钮以添加另一个具有相同值的选项，该选项将变为选中状态，但根据文档，它不应该被选中。

我的问题是，如何防止这种行为？

Answer 1

为什么要将项目一个一个地插入数组？你可以这样做:

view.titles(data);

代替

for(var i = 0; i < data.length; i++) {
    view.titles.push(data[i]); //Push titles into observable array
}

这也可以解决您的问题 - 默认情况下会选择第一项。此外，如果您不打算向该数组添加新项，则可以使用 ko.observable 而不是 ko.observableArray

更新:Knockoutjs 似乎不喜欢具有相同值的多个选项。如果您将值绑定(bind)添加到选择标记(它将选择第三项，而不是第一项)，我的代码将无法正常工作。但是，由于 knockoutjs 允许您访问所选对象(通过值绑定(bind))，您可以删除 optionsValue 绑定(bind)并通过值绑定(bind)访问值:jsfiddle.net/ej9Ue/1