Привязка значения в KnockoutJs не подходит для выбора при наличии сложных типов

Я пытаюсь использовать привязку значения для элемента select, как описано в этой скрипте: http://jsfiddle.net/MikeEast/nM6dd/2/

Однако я не могу установить выбранную опцию (привязка значений).

Я знаю, что могу использовать привязку optionsValue, но это делает значение строкой вместо объекта, который не является предпочтительным. Если это единственный способ, как сделать, чтобы выбранная опция была возвращена в модель представления?

Ответы

Ответ 1

Вот решение. Вы должны добавить атрибут optionsValue: 'id' к привязке данных. Вы также должны поместить в функцию функцию viewModel, которая возвращает выбранный объект.

HTML

<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<span data-bind="text: selectedItem().name"></span>

var viewModel = function () {
   this.items = ko.observableArray([
       { id: 1, name: "Apple" }, 
       { id: 2, name: "Orange"},
       { id: 3, name: "Banana"}
   ]);
   this.selectedItemId = ko.observable(3);
   this.selectedItem = function() {
       var self = this;
       return ko.utils.arrayFirst(this.items(), function(item) {
           return self.selectedItemId() == item.id;
       });
   }.bind(this);
};

var vm = new viewModel();
ko.applyBindings(vm);

Ура!