ajax呼び出しから返されたJSONから生成されたKnockoutマップされた配列のメンバーを削除するには？

Question

私はknockoutjsとマッピングプラグインを使用して、サーバーコールから返されたJSONからビューモデルを生成しています。私はサーバーから配列を取得し、プロパティとしてマップされた配列を持つモデルを作成し、次にデータを画面にすべてのデータをレンダリングするためにテンプレートに配列をバインドします。どちらが素晴らしいですか？

this video（約14:20を参照してください）の例のように、各項目の横にボタンを表示して削除することができます。

しかし、ビデオでは、彼は配列の要素で定義された関数にバインドします。私の要素は、マッピングプラグインを使用してJSONから生成されるので、各要素にどのように関数を追加するのか、あるいはそれをやりたいと思っていてもわかりません。または、ボタンのクリックをビューモデル上の関数にバインドさせ、そのボタンが関連付けられている要素のIDを渡すことはできますか？

私のjavascript：

<script type="text/javascript"> 
    var supplierModel; 

    $(function(){   
     getAllSuppliers();  
    }) 

    function getAllSuppliers(){ 
     $.getJSON('/SWM60Assignment/allsuppliers',function(responseData){ 
      supplierModel = new SupplierModel(responseData); 
      ko.applyBindings(supplierModel);    
     }); 
    } 
    var SupplierModel = function (supplierList) { 
     var self = this; 

     self.suppliers = ko.mapping.fromJS(supplierList); 
     self.remove = function(supplierId){ 
      // how can I get the buttons to call this method with the id 
      // of the element they are the button for? 
      alert('remove called with supplier id:'+supplierId); 
     } 
    }; 
</script> 

、これはテンプレートです：

<script id="supplierTemplate" type="text/html"> 
    <li> 
     Name: <span data-bind="text:name"></span> Address: <span data-bind="text:address"></span> 
     <button data-bind="click:<what can I put here to bind correctly>>">Remove supplier</button> 
    </li> 
</script> 

および完全性についてHTML：

<ul class="vertical" data-bind="template:{name:'supplierTemplate',foreach:suppliers}"></ul> 

Answer 1

方法について：

<button data-bind="click: $parent.remove">Remove supplier</button> 

注1 here

ko.mappingを使用すると、「配列は可観測配列に変換されます」と表示されます。したがって、suppliersプロパティにはkoの配列メソッド（removeなど）が表示されます。

また、同様にあなたのremove関数に実際のsupplierに合格することがあります：

var SupplierModel = function (supplierList) { 
    var self = this; 

    self.suppliers = ko.mapping.fromJS(supplierList); 
    self.remove = function(supplier){ 
     // observable array 
     self.suppliers.remove(supplier); 
    } 
};