#javascript #html #mvvm #knockout.js
#javascript #HTML #mvvm #knockout.js
Вопрос:
Возможно ли, чтобы у меня было несколько выпадающих меню (не определенное количество), в которых есть элементы, и опция нового элемента, которая добавляет новый элемент в выпадающий список.
Например, будет ~ 5 выпадающих списков, и пользователь выбирает номер элемента. Когда они выбирают новый элемент, он добавляет элемент в список
Это все, что я понимаю, не уверен, как я могу справиться с этой проблемой с помощью knockout. Возможно ли это на самом деле?
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>
var Item = function(data){
var self = this;
self.id = ko.observable(data.id);
self.name = ko.observable(data.name);
};
var viewModel = function(data) {
var self = this;
self.selectedChoice = ko.observable();
self.items = ko.observableArray([
new Item({id: "1", name: "Item 1"}),
new Item({id: "2", name: "Item 2"}),
new Item({id: "3", name: "New Item"})]);
self.sendMe = function(){
alert(ko.toJSON({ selectedItemId: this.selectedChoice()}));
};
};
ko.applyBindings(new viewModel());
Комментарии:
1. Добро пожаловать в Stack Overflow. Я пытаюсь разобраться в вашем примере — значит, вам нужно несколько выпадающих списков, в которых есть опция new item , а при нажатии добавляется еще один <select> на вашу страницу? Я думаю, что это выполнимо, но, вероятно, намного проще просто иметь кнопку «Добавить новый», которая отделена от выпадающих списков. Это вариант?
2. Должно быть, когда выбран новый элемент, он автоматически добавляется в список. У меня будет несколько выпадающих списков, каждый из которых имеет свое собственное значение элемента, поэтому может быть два элемента 1, один элемент 2, возможно, один элемент 3. И да, можно было бы добавить дополнительные теги <select> на страницу
3. Должен ли каждый выпадающий список быть автономным? Например, если у меня есть 3 выпадающих списка, и я выбираю «новый элемент» на втором, должны ли два других выпадающих списка также получить новый элемент?
4. Это верно, да, так что, если бы я начал только с двух элементов и добавил еще два элемента, у меня был бы выбор из 4 вариантов во всех выпадающих списках. Спасибо.
Ответ №1:
Одним из способов достижения этой цели было бы подписаться на наблюдаемый selectedChoice и обновлять массив в любое время, когда выбран «Новый элемент»:
self.selectedChoice.subscribe(function(newValue) {
var lastItem = self.items()[self.items().length - 1];
if (newValue === lastItem.id()) {
// Add the new item
var id = self.items().length 1;
var name = 'Item ' self.items().length;
var item = new Item({id: id, name: name});
self.items.push(item);
// Drop and re-add the 'New Item' item so that it remains at the bottom
self.items.remove(lastItem);
self.items.push(lastItem);
// Select the newly added item
self.selectedChoice(id);
}
});