KnockoutJS：如何将一个 observableArray 添加到另一个？

Question

我想将选择元素中的选定选项添加到绑定表。视图模型具有 addItem 函数，该函数使用 ko.utils.arrayPushAll() 将 selectedItems 数组添加到 addedItems 数组中。但是当我点击 Add 按钮（调用 addItem 函数）时什么也没有发生。如何正确地将一个可观察数组添加到另一个？

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/

Answer 1

这里发生了一些事情：

1) 您正在使用 'optionsValue' 绑定，因此 selectedItems 只会包含一个 id 列表

2) arrayPushAll 适用于“本机”数组，而不是 observableArrays。您仍然可以使用 self.addedItems() 和 self.selectedItems() 表单来完成这项工作，但是您需要调用 self.addedItems.valueHasMutated() 让订阅者知道更改。

3) removeAll 接受“本机”数组参数，而不是 observableArray。

这是一个有效的最终小提琴：

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