knockout.js - 如何删除从 ajax 调用返回的 JSON 生成的 Knockout 映射数组的成员？

Question

我正在使用 knockoutjs 和映射插件从服务器调用返回的 JSON 生成 View 模型。我从服务器获取一个数组，创建一个将映射数组作为属性的模型，然后将该数组数据绑定(bind)到模板以在屏幕上呈现所有数据。效果很好。

我想在每个项目旁边呈现一个按钮，这样我就可以删除它，就像 this video 中的示例一样。 (见约 14:20)。

但在视频中，他绑定(bind)到在数组元素上定义的函数。我的元素是使用映射插件从 JSON 生成的，所以我不确定如何向每个元素添加函数，或者我什至是否想这样做。或者我可以让按钮的点击绑定(bind)到 View 模型上的一个函数并传入与按钮关联的元素的 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 )。

您可能还想传入实际的 supplier给您的 remove功能也:

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

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