Отображение нокаута select json не работает

Я новичок в автомаппере KO. У меня есть этот код:

 var jData = [
                    { "Id": 2, "Name": "A" },
                    { "Id": 3, "Name": "B" },
                    { "Id": 4, "Name": "C" }]
            };
        var viewModel = ko.mapping.fromJSON(JSON.stringify(jData));
        ko.applyBindings(viewModel);

Этот код работает:

<div data-bind="foreach : $data">
            <input type="text" data-bind='value: Name' />
            <br />
        </div>

но если я хочу выбрать через карту:

 <select id="prova" data-bind='options: $data, optionsText: "Name", optionsValue: "Id"    , value: Id'></select>

я получил эту ошибку

Включите анализ привязок. Сообщение: ReferenceError: 'Id' не определен; Значение привязки: options: $data, optionsText: "Name", optionsValue: "Id" , value: Id

Что случилось? спасибо л


person MetalMad    schedule 17.12.2012    source источник


Ответы (2)


Основная причина проблемы заключается в том, что ваша модель представления не содержит свойство Id. Вы должны добавить это. Я бы реализовал что-то вроде этого:

 var jData = [
                    { "Id": 2, "Name": "A" },
                    { "Id": 3, "Name": "B" },
                    { "Id": 4, "Name": "C" }]

function ViewModel(){
   var self = this;

   self.list = ko.mapping.fromJSON(JSON.stringify(jData));
   self.Id = ko.observable();
}

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

HTML:

<select id="prova" data-bind='options: list, optionsText: "Name", optionsValue: "Id"    , value: Id'></select>

Вот рабочая скрипка: http://jsfiddle.net/ardr8/

person Artem Vyshniakov    schedule 17.12.2012

Проблема связана с привязкой значения: идентификатор, идентификатор должен быть в «». Кроме того, привязку значения следует использовать для установки выбранного значения в раскрывающемся списке, просто установив для него значение Id, всегда будет выбрано значение со значением 1.

<select id="prova" data-bind='options: $data, optionsText: "Name", optionsValue: "Id", value: "Id"'></select>

Проверьте jsfiddle здесь http://jsfiddle.net/uVfgx/

person Scorpion-Prince    schedule 17.12.2012