KnockoutJS：observableArrayを別のobservableArrayに追加するにはどうすればいいですか？

Question

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

ここで起こっていくつかのことがあります。selectedItemsのはちょうどidのリストが含まれているために起こっているので、あなたは「optionsValue」バインディングを使用している

1）は、

2 ）arrayPushAllはobservableArraysではなく、 "ネイティブ"配列で動作します。 self.addedItems（）およびself.selectedItems（）フォームを使用してこの作業を行うことはできますが、その後、self.addedItems.valueHasMutated（）を呼び出して、加入者に変更を知らせる必要があります。

3）removeAllはobservableArrayではなく "native"配列パラメータを取ります。ここで

は作品の最終フィドルです：

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