2

select要素からバインディングテーブルに選択したオプションを追加したい。ビューモデルには、ko.utils.arrayPushAll（）を使用してselectedItems配列をaddedItems配列に追加するaddItem関数があります。しかし、[追加]ボタンをクリックしても何も起こりません（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/

4

1 に答える 1

4

ここで起こっていることがいくつかあります：

1）'optionsValue'バインディングを使用しているため、selectedItemsにはIDのリストが含まれるだけです。

2）arrayPushAllは、observableArrayではなく、「ネイティブ」配列で機能します。self.addedItems（）フォームとself.selectedItems（）フォームを使用してこの作業を行うことはできますが、その後、self.addedItems.valueHasMutated（）を呼び出して、サブスクライバーに変更を通知する必要があります。

3）removeAllは、observableArrayではなく、「ネイティブ」配列パラメーターを取ります。

これが機能する最後のフィドルです：

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

于 2012-03-18T13:40:43.657 に答える