在 knockout.js 中使用可观察数组填充下拉列表

Question

我有 X 个使用 Knockout 动态创建的下拉菜单，现在我想为每个下拉菜单预选一个选项。巧合的是，我有一个可观察的数组，其中包含与我想要选择的选项相对应的 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/

如果您有很多这样的下拉菜单，那么您可以使用一组子虚拟机作为结果。像这样的：

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 而不是父列表。