KnockoutJS选项绑定有重复值

KnockoutJS options binding with duplicate values

本文关键字：选项 绑定 KnockoutJS      更新时间：2023-09-26

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

我正在使用options绑定来生成select元素的内容：

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

视图模型如下所示：

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

在DOM ready上，我将一些值推送到可观察的数组中（每个值都是一个对象文字，代表一个"标题"，例如"Mr"、"Mrs"等）：

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"的option，因此Knockout认为它是以前选择的选项并选择它。

这里有一个小提琴的链接来演示这个问题。应选择"默认值"选项，但未选择。如果单击该按钮再次添加具有相同值的另一个选项，则该选项将被选中，但根据文档，它不应该被选中。

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

为什么要一个接一个地将项推入数组？你可以做：

view.titles(data);

而不是

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

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

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

相关文章：