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

Question

我试图以这样一种方式创建一组下拉列表，以便可以将新的下拉列表动态添加到该列表中。 一个示例是订购比萨饼的表单，其中带有一组用于浇头的选择标签。 我们不知道用户想要多少个浇头，因此我们将从一个开始，并在用户选择第一个浇头时动态添加一个新的选择。

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

我尝试了各种不同的方法，以基于$ 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/