ajax 호출에서 반환 된 JSON에서 생성 된 녹아웃 매핑 된 배열의 멤버를 삭제하는 방법은 무엇입니까?

Question

knockoutjs와 매핑 플러그인을 사용하여 서버 호출에서 반환 된 JSON의 뷰 모델을 생성합니다. 서버에서 배열을 가져온 다음 매핑 된 배열을 속성으로 가진 모델을 만든 다음 데이터를 배열에 바인딩하여 모든 데이터를 화면에 렌더링합니다. 어느 것이 좋습니다.

this video (약 14:20 참조)의 예와 같이 제거 할 수있는 각 항목 옆에 버튼을 표시하고 싶습니다.

그러나 비디오에서 그는 배열 요소에 정의 된 함수에 바인딩합니다. 내 요소는 매핑 플러그인을 사용하여 JSON에서 생성되므로 각 요소에 함수를 추가하는 방법이 확실하지 않거나 원하는 경우에도 수행해야합니다. 또는 단추의 클릭을 viewmodel의 함수에 바인드시키고 버튼이 연관된 요소의 ID를 전달할 수 있습니까?

내 자바 스크립트 :

<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); 
    } 
};