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/