user-interface - 无法通过 knockout 删除剑道网络网格的项目

Question

我有一个结合 knockout 的剑道网络网格。网格的最后一列包含一个用于删除该行的按钮。但是removeItem方法的参数

this.removeItem = function (item) {
        this.FilteredClients.remove(item);
    }.bind(this);

得到错误的值。

看看http://jsfiddle.net/zeQMT/93/

缺少什么？

顺便说一句。我不想使用行模板，因为我想自己设置列标题。

Answer 1

如果您不使用行模板，则以这种方式绑定(bind)不是无缝的。有一些非常简单的方法可以处理单元格中按钮的单击，找到与该行关联的数据项，然后找到 View 模型项。

例如，您可以绑定(bind)列，如下所示:

   columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", click: removeItem}]}
            ]

然后，您的 removeItem 函数需要找到适当的 View 模型项，例如:

this.removeItem = function(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    if (dataItem && dataItem.id) {
        self.items.remove(function(item) {
           return item.id === dataItem.id; 
        });
    }
};

示例:http://jsfiddle.net/rniemeyer/EpkPy/

如果您想让 View 模型代码保持简洁(避免引用其中的事件/元素)，那么您可以附加一个处理程序来定位该项目，然后调用 View 模型。这是我的偏好。

类似于:

   columns: [
                { field: "id", title: "id"},
                { field: "name", title: "name"}, 
                { command:[{text: "x", className: "btnRemove" }]}
            ]

然后，将处理程序不显眼地附加到按钮，例如:

$("#myGrid").on("click", ".btnRemove", function(e) {
    var widget = $("#selectedServices").data("kendoGrid");
    var dataItem = widget.dataItem($(e.currentTarget).closest("tr"));
    if (dataItem && dataItem.id) {
          vm.removeItem(dataItem.id);
    }
});

虚拟机上的 removeItem 方法将只接受 id，如下所示:

this.removeItem = function(id) {
    self.items.remove(function(item) {
        return item.id === id; 
    });
};

http://jsfiddle.net/rniemeyer/AwX5N/