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

Question

我试图创建一组下拉列表，以便可以动态地将新的下拉列表添加到集合中。一个例子是订购披萨的表格，以及一组用于浇头的选择标签。我们不知道用户需要多少配料，因此我们将从一个开始，并在用户选择第一个配料时动态添加一个新的配料。

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

我已经尝试了所有不同类型的基础上$数据绑定方法，使用别名，使用不同的上下文走回对象，并结合在不同的地方环境中使用虚拟元件等

这个例子有点做作，因为会有其他代码参与实际添加更多选择等，但它确实复制了我所看到的问题。只需选择几个浇头，然后单击检查值按钮以查找未在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/