Knockout bind select с пользовательским объектом с наблюдаемыми свойствами

Я пытаюсь связать <select> с нокаутом. В моей ViewModel у меня есть 2 разных объекта, каждый с наблюдаемыми свойствами.

Первый объект Property у которого есть headquarter_id как ko.observable(), Второй объект Headquarter у которого есть id и nameкак ko.observable(),

Что я пытаюсь сделать, это связать выбор с ko.observableArray() из Headquarter объекты, как это:

<select id="headquarters" data-bind="options: HeadquarterOptions, optionsText: name, optionsValue: id, optionsCaption: '--Select--', value: Property().headquarter_id"></select>

Но я продолжаю получать:

Uncaught ReferenceError: Unable to process binding "options: function (){return HeadquarterOptions }"
Message: id is not defined

Вот как выглядит моя ViewModel:

var Property = function () {
    var self = this;
    self.headquarter_id = ko.observable();
}

var Headquarter = function (id, name) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
}

var headquarterOptions = [
        new Headquarter(1, "hq 1"),
        new Headquarter(2, "hq 2"),
        new Headquarter(3, "hq 3"),
    ]

var PropertiesViewModel = function (app, dataModel) {
    var self = this;
    self.Property = ko.observable(new Property());
    self.HeadquarterOptions = ko.observableArray(headquarterOptions);
}

ko.applyBindings(PropertiesViewModel);

Как я могу достичь этого? Вот моя нынешняя скрипка: http://jsfiddle.net/juandozco/dzwnb05b/

Источник

2 ответа

Решение

Там вы идете http://jsfiddle.net/dzwnb05b/4/

<select class="form-control" id="headquarter" data-bind="options: HeadquarterOptions, optionsText: 'name', optionsValue: 'id', optionsCaption: '--Select--', value: Property().headquarter_id"></select>

Вы пропустили одинарные кавычки вокруг имени и идентификатора.

Источник

optionsValue а также optionsText должны быть объявлены как функции вместо значений ( http://knockoutjs.com/documentation/options-binding.html):

optionsText: function(item) {return item.name; }
optionsValue: function(item){ return item.id; }

Проверьте обновленную скрипку: http://jsfiddle.net/dzwnb05b/3/

Источник
Другие вопросы по тегам