javascript - Knockout.js 在 foreach 绑定(bind)中绑定(bind)选择选项和值

Question

我正在尝试创建一组下拉列表，以便可以动态地将新的下拉列表添加到该组中。一个示例是订购披萨的表单，其中包含一组用于配料的选择标签。我们不知道用户想要多少种配料，因此我们将从一个开始，并在用户选择第一个配料时动态添加新的选择。

我遇到的问题是选择上的值绑定(bind)无法正常工作。如果最初设置了值对象，则 select 将绑定(bind)到它，但任何更改都不会更新 VM 中的可观察对象。

我尝试了各种不同的方法来基于$data进行绑定(bind)，使用别名，使用不同的上下文走回对象，以及使用虚拟元素将上下文绑定(bind)到不同的位置等等。

这个示例有点人为，因为会涉及其他代码来实际添加更多选择等，但它确实复制了我所看到的问题。只需选择几个配料，然后单击“检查值”按钮即可发现虚拟机中未设置该选择。

http://jsfiddle.net/x6u0hutm/5/

<!-- ko foreach: {data: selectedPropertyNames} -->
<select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"></select>
<!-- /ko -->
<button type="button" data-bind="click: checkValues">Check Values</button>

function ViewModel() {
    var self = this;
    this.nameOptions = ko.observableArray([]);
    this.selectedPropertyNames = ko.observableArray([]);

    var firstSelection = ko.observable(null);
    this.selectedPropertyNames.push(firstSelection);

    var secondSelection = ko.observable('Beef');
    this.selectedPropertyNames.push(secondSelection);

    this.nameOptions(['Pepperoni', 'Beef', 'Pineapple', 'Green Peppers', 'Extra Cheese']);

    this.checkValues = function () {
        for (var i = 0; i < self.selectedPropertyNames().length; i++) {
            console.log(self.selectedPropertyNames()[i]());
        }
    }
};

ko.applyBindings(new ViewModel());

Answer 1

问题出在 foreach 数据绑定(bind)上。

<!-- ko foreach: {data: selectedPropertyNames} -->
<select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"></select>
<!-- /ko -->

您将值绑定(bind)到 $data，它是变量的内容，而不是变量引用本身。如果您将绑定(bind)更改为

<select data-bind="options:$root.nameOptions, value: $root.selectedPropertyNames()[$index()], optionsCaption: 'Pick One'"></select>

然后就可以正常工作了。更新的 fiddle 位于 http://jsfiddle.net/newuserjs/4o80aebr/