4

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

我想在每个项目旁边呈现一个按钮，以便我将其删除，就像本视频中的示例一样（见 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>
4

1 回答 1

10

怎么样：

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

请参阅此处的注 1

如果你使用ko.mapping它说“数组被转换成可观察的数组”。因此，您的suppliers属性将具有ko数组方法（ like 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 ); 
    }
};
于 2012-04-19T22:04:36.557 回答