Заполнение выпадающего списка наблюдаемым массивом в 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

Согласно документам вам нужно 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/

Если у вас есть много таких выпадающих списков, вы можете использовать массив subVM для вашего результата. Что-то вроде этого:

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>

Теперь вы можете добавить столько раскрывающихся списков, сколько вам нужно, добавив их в dropDowns массив в вашей родительской виртуальной машине.

Пример: http://jsfiddle.net/H6DL5/1/

Если вам нужны разные опции в каждом раскрывающемся списке, просто добавьте массив доступных опций в вашу SubVM и свяжите для options что вместо родительского списка.