KnockoutJS：如何将一个observableArray添加到另一个？ [英] KnockoutJS: How to add one observableArray to another?

问题描述

我想从选择元素选定的选项添加到绑定表。视图模型具有的addItem函数添加selectedItems数组addedItems阵列使用ko.utils.arrayPushAll（）。但是，当我点击添加按钮，没有任何反应（调用的addItem功能）。如何一个可观察阵列正确地添加到另一个？

I want to add selected options from select element to binding table. The view model has addItem function that add selectedItems array into addedItems array with using ko.utils.arrayPushAll(). But nothing happens when I click on Add button (calls addItem function). How to correctly add one observable array to another?

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/

推荐答案

有几件事会在这里：

1）您使用的是optionsValue结合，所以selectedItems只是要包含ID列表

1) You are using the 'optionsValue' binding, so selectedItems is just going to contain a list of ids

2）arrayPushAll作品有原生的阵列，而不是observableArrays。您仍然可以通过使用self.addedItems（）和self.selectedItems（）的形式，使这项工作，但是你需要调用self.addedItems.valueHasMutated（），让用户知道的变化。

2) arrayPushAll works with "native" arrays, not observableArrays. You can still make this work by using the self.addedItems() and self.selectedItems() forms, but you will then need to call self.addedItems.valueHasMutated() to let subscribers know of the changes.

3）采取的removeAll在本机数组参数，而不是observableArray。

3) removeAll takes in a "native" array parameter, not an observableArray.

下面是一个可行的最终小提琴：

Here is a final fiddle that works:

http://jsfiddle.net/jearles/6H2PK/8/

这篇关于KnockoutJS：如何将一个observableArray添加到另一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！