Knockout.js 在 foreach 绑定中绑定选择选项和值

Question

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

我遇到的问题是 select 上的值绑定无法正常工作。如果初始设置了 value 对象，select 将绑定到它，但任何更改都不会更新 VM 中的 observable。

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

这个例子有点做作，因为会涉及其他代码来实际添加更多选择等，但它确实复制了我看到的问题。只需选择几个浇头，然后单击“检查值”按钮即可发现该选项未在 VM 中设置。

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 数据绑定上。

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

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

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

然后它会正常工作。更新的小提琴位于http://jsfiddle.net/newuserjs/4o80aebr/