как динамически привязать данные к раскрывающемуся списку с помощью Knockout.js?

Я новичок в Knockout.js. Я не смог связать данные из API с выпадающим списком, используя нокаут js.

Мои данные Json из API и раскрывающегося списка:

[{
ContactID: 0,
FirstName: "Aaa",
LastName: "bbb",
MobileNumber: null,
StartDate: "0001-01-01T00:00:00",
EndDate: "0001-01-01T00:00:00"
},
{
ContactID: 0,
FirstName: "Ccc",
LastName: "ddd",
MobileNumber: null,
StartDate: "0001-01-01T00:00:00",
EndDate: "0001-01-01T00:00:00"
}
]
<select id="selectmenu1" name="" data-theme="c" data-bind="optionsCaption: 'Choose...'">        </select>

Я просто привязываю имя, фамилию, контактный идентификатор к раскрывающемуся списку и отображаю имя и фамилию в виде текста, а контактный идентификатор является полем значения для этого элемента. Может ли кто-нибудь дать несколько предложений по этому поводу?


jquery single-page-application asp.net-mvc-4 knockout.js jsonp
person Community    schedule 08.08.2013    source источник
comment
вам просто нужно использовать knockoutjs.com/documentation/options-binding.html   -  person dev.meghraj    schedule 08.08.2013

Ответы (2)


arrow_upward
12
arrow_downward

Вам нужно использовать привязку options, где нужно указать:

  • ваш массив элементов в options (см. пример 3 в документе)
  • вам нужно установить optionsValue: 'ContactID', чтобы иметь ContactID в качестве значения
  • вам нужно указать функцию в optionsText, которая строит выбранные вами тексты (см. Пример 4 в документе)

Таким образом, ваша окончательная привязка будет выглядеть так:

<select id="selectmenu1" name="" data-theme="c" 
  data-bind="options: contacts, 
             optionsValue: 'ContactID', 
             optionsText: function(i) { return i.FirstName + ' ' + i.LastName }, 
             optionsCaption: 'Choose...'">        
</select>

Демонстрация JSFiddle.

person nemesv    schedule 08.08.2013
comment
Привет nemesv, спасибо за ваш ответ. но я получаю вышеуказанные данные от WEBAPI.. но вы жестко закодировали значения. Скажите, пожалуйста, создать модальное представление в Knock Out JS и привязать значения к раскрывающемуся списку. - person ; 08.08.2013
comment
Существует множество статей о том, как использовать webapi или нокаут: вы можете начать с dotnetcurry .com/ShowArticle.aspx?ID=875. Я помог вам с вашей привязкой, потому что ваш вопрос был только об этом. Если у вас есть дальнейшие конкретные проблемы, задавайте их в разных вопросах. - person nemesv; 08.08.2013
comment
Привет Немесв, спасибо. но он не показывает «Выбрать».. как текст по умолчанию в этом раскрывающемся списке??? Он отображается только при выборе этой опции.. - person ; 08.08.2013
comment
Если у вас есть optionsCaption: 'Choose...', то он должен работать, как работает в моей демонстрации. Как выглядит ваш нынешний select data-bind ? - person nemesv; 08.08.2013
comment
Привет, nemesv, я на самом деле не понимаю код, который пытаюсь использовать. Можете ли вы написать все для меня, и чем больше вы будете отвечать, тем больше я буду спрашивать? - person PW Kad; 08.08.2013
comment
Привет, nemesv, в раскрывающемся списке он отображается пустым. Если я нажму раскрывающийся список, он покажет выбор ... в качестве первого текста в этом раскрывающемся списке ... почему? - person ; 08.08.2013

arrow_upward
0
arrow_downward

Вы можете использовать плагин нокаут-мэппинга. Подробнее см. здесь

А также вы можете ознакомиться с отличным руководством по загрузке и сохранению данных.

person Pylyp Lebediev    schedule 08.08.2013