Я хочу добавить выбранные параметры из элемента select в таблицу привязки. В модели представления есть функция addItem, которая добавляет выбранный массив Items в массив addedItems с использованием ko.utils.arrayPushAll(). Но ничего не происходит, когда я нажимаю кнопку «Добавить» (вызывает функцию addItem). Как правильно добавить один наблюдаемый массив в другой?KnockoutJS: Как добавить один наблюдаемый массив в другой?
HTML
<label>Parameter list</label>
<br/>
<select multiple="multiple"
data-bind="options: items, selectedOptions: selectedItems, optionsText: 'name', optionsValue: 'id'">
</select>
<p>
<button data-bind="click: addItem, enable: selectedItems().length > 0">Add</button>
</p>
<label>Selected parameters</label>
<br/>
<table data-bind="visible: addedItems().length > 0">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th />
</tr>
</thead>
<tbody data-bind="foreach: addedItems">
<tr>
<td>
<input type="hidden" data-bind="value: id"/>
<span data-bind="text: name" />
</td>
<td><input type="text" data-bind="value: value" /></td>
<td><a href="#" data-bind="click: $root.removeItem">Remove</a></td>
</tr>
</tbody>
</table>
JavaScript
var dataSource = [
new Parameter({ id: "1", name: "param1", value: "" }),
new Parameter({ id: "2", name: "param2", value: "" }),
new Parameter({ id: "3", name: "param3", value: "" })
];
function Parameter(data) {
this.id = ko.observable(data.id);
this.name = ko.observable(data.name);
this.value = ko.observable(data.value);
}
function ParameterSelectList() {
// Data
var self = this;
self.items = ko.observableArray(dataSource);
self.selectedItems = ko.observableArray([]);
self.addedItems = ko.observableArray([]);
// Operations
self.addItem = function() {
ko.utils.arrayPushAll(self.addedItems, self.selectedItems);
self.items.removeAll(self.selectedItems);
};
self.removeItem = function(item) {
self.items.push(item);
self.addedItems.remove(item);
};
}
ko.applyBindings(new ParameterSelectList());
Живой пример - http://jsfiddle.net/6H2PK/7/
ОБНОВЛЕНО: Рабочий пример с удалением отдельных элементов - http://jsfiddle.net/ebash/xxNak/
Большое спасибо. Но у меня есть один вопрос: почему функция removeAll «родная»? self.items.removeAll (self.selectedItems()); удаляет элементы из
Что я имел в виду под «native», так это то, что он ожидает стандартный JavaScript-массив (а не наблюдаемый массив), который, как и все наблюдаемые, является функцией). Для каждого элемента в переданном массиве он удалит тот же элемент (если он есть) из self.items observableArray. Наблюдаемый массив уведомляет всех подписчиков о том, что он изменился, и это заставляет элемент выбора повторно отображать. –
removeAll не является «родной» функцией - http://knockoutjs.com/documentation/observableArrays.html – ebashmakov