带有重复值的KnockoutJS选项绑定 [英] KnockoutJS options binding with duplicate values

问题描述

我正在使用Knockout.js构建一个简单的应用程序作为概念验证.因为我对Knockout还是很陌生，所以该问题中的代码可能还不够完善，并表现出不良做法，请随时告诉我是否是这种情况！

I'm building a simple app with Knockout.js as a proof of concept. As I'm very new to Knockout, the code in this question may be far from perfect and exhibit bad practices, so feel free to let me know if that's the case!

我正在使用 options 绑定来生成select元素:

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

视图模型如下:

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

在准备好DOM之后，我正在将一些值推入该可观察数组(每个值都是一个对象文字，表示一个标题"，例如"Mr"，"Mrs"等):

On DOM ready I am pushing some values into that observable array (each value is an object literal, representing a "title", e.g. "Mr", "Mrs" etc):

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元素，实际上该元素最终作为默认选择.

Don't ask why there are two objects with the value "Mr", that's just the way the data I have to deal with comes. I can't change it. However, this is what causes the problem. I would expect the first object to represent the selected option, but that's not the case. The third object represents the option element that actually ends up as the default selection.

我相信这是由于以下事实:可观察到的数组会导致option元素在循环迭代时被一一添加到DOM中.淘汰赛试图通过检查所选选项的值来保留所选选项.第一次迭代后，所选的option的值为"Mr".在第三次迭代之后，还有另一个option，其值为"Mr"，因此Knockout认为它是先前选择的选项，然后选择了它.

I believe this is due to the fact that the observable array causes the option elements to be added to the DOM one by one as the loop iterates. Knockout attempts to preserve the selected option by checking it's value. After the first iteration, the selected option has the value "Mr". After the third iteration there is another option with the value "Mr" so Knockout thinks that it was the previously selected option and selects it.

这是链接到小提琴的链接，说明了问题所在.应该选择默认值"选项，但不要选择.如果单击该按钮再次添加具有相同值的另一个选项，该选项将被选中，但是根据文档，应该不会.

Here's a link to a fiddle demonstrating the problem. The "Default Value" option should be selected, but is not. If you click the button to add another option with the same value again, that becomes selected, but, according to the documentation, it should not.

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

My question is, how can this behaviour be prevented?

推荐答案

为什么要将项目一个接一个地推入数组?您可以这样做:

Why are you pushing items into array one by one? You could just do:

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

This would also fix your problem - the first item would be selected by default. Also, if you are not planning on adding new items to that array, you could use ko.observable instead of ko.observableArray

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

UPDATE: Knockoutjs doesn't seem to like multiple options with the same value. My code won't work properly if you add value binding to a select tag (it will select third item, not first). However, since knockoutjs allows you to access selected object (via value binding), you can remove optionsValue binding and access value via value binding: jsfiddle.net/ej9Ue/1

这篇关于带有重复值的KnockoutJS选项绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！