在knockout.js中添加可觀察數組的下拉列表

Question

我有使用Knockout動態創建的X個下拉列表，現在我想爲每個下拉列表預先選擇一個選項。巧合的是，我有一個可觀察的數組，其X條目對應於我想要選擇的選項。我如何使用這個數組來選擇我的選項？

實施例視圖模型：

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog","Cat"]); 
} 

在本例中，我有兩個下拉列表，兩者都具有「狗」和「貓」選項。我想爲第一個下拉選擇「狗」，第二個選擇「貓」。

這裏是我的HTML：

<div data-bind="foreach: array"> 
     <label> 
     <select data-bind="options: array"></select> 
     </label> 
</div> 

Answer 1

由於每docs你需要一個value爲您選擇的有約束力。

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog","Cat"]); 
    self.selected = ko.observable(self.array()[0]); 
} 

然後：

<select data-bind="options: array, value: selected "></select> 

例子：http://jsfiddle.net/H6DL5/

如果你有許多的下拉列表中，那麼你可以使用subVMs的數組，你的結果。事情是這樣的：

function AppViewModel() { 
    var self = this; 
    self.array = ko.observable(["Dog", "Cat", "Weasel"]); 
    self.dropDowns = ko.observableArray([ 
    new SubVM("Dog"), 
    new SubVM("Cat")]); 
} 

function SubVM(selected) { 
    var self = this; 
    self.selected = ko.observable(selected); 
} 

可以綁定像這樣：

<div data-bind="foreach:dropDowns"> 
    <select data-bind="options: $parent.array, value: selected "></select> 
</div> 

現在，你需要將它們添加到您的母VM的dropDowns陣列，您可以添加儘可能多的下拉列表。

例子：http://jsfiddle.net/H6DL5/1/

如果您需要在每個下拉不同的選擇，只需添加一個陣列的可用選項，您SubVM和綁定爲options，與其母公司名單。