在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，与其母公司名单。