Question

我想将select元素中的选定选项添加到绑定表中。视图模型具有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接受“native”数组参数，而不是observableArray。

这是最后的小提琴：

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

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

1 个答案: