Выбранное поле не заполняется предопределенными selectedOptions
У меня возникают трудности с получением выбранного поля с несколькими вариантами выбора для заполнения при настройке выбранных параметров и последующим обновлением поля.
В моем приложении я использую knockout.js для привязки observables/observableArrays к моим полям, а в выбранном поле параметры представляют собой список объектов. Основываясь на параметрах, выбранных в этом поле, я хочу заполнить отдельный выпадающий список ранее выбранными объектами.
Все работает нормально, когда я начинаю без каких-либо предварительно выбранных параметров, однако, когда я заполняю выбранные параметры, выбрасываем observableArray с помощью JavaScript, а затем вызываю выбранную команду обновления, выбранное поле остается пустым, но отдельный выпадающий список успешно обновляется.
Html:
<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>
Переменные нокаута:
vs.userOptions: ko.observableArray([]);
vs.selectedUsers: ko.observableArray([]);
vs.primaryUser: ko.observable();
Объект userOptions/selectedUsers:
{
id: -1,
email: "",
name: ""
}
JavaScript:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var object = {
id: data[i].id,
email: data[i].email,
name: data[i].name
};
vs.selectedUsers.push(object);
if (data[i].primaryUser) {
vs.primaryUser(object);
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
** Примечание: данные из вызова Ajax GET возвращают массив объектов, содержащих pkey, id, email, name и primaryUser, где primaryUser - логическое значение, определяющее, были ли они выбраны как primaryUser.
1 ответ
Обновление: вернулся к проблеме и нашел исправление, которое работало. Мне пришлось настроить код в функции успеха AJAX:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});