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

sample : 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然后，您的 vm 上的方法将只接受 id，例如:

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

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