Question

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

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

得到错误的值。

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

缺少什么？

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

Answer 1

如果您没有使用行模板，那么以这种方式绑定是不可能的。有几个非常简单的方法，你可以处理单元格中的按钮单击，找到与该行关联的数据项，然后找到视图模型项。

例如，您可以绑定列，如：

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

然后，您的removeItem函数需要找到适当的视图模型项，如：

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/

如果要保持视图模型代码更清晰（避免引用其中的事件/元素），则可以附加一个定位项目的处理程序，然后调用视图模型。这是我的偏好。

类似的东西：

   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/

无法使用淘汰赛删除剑道网格项目

1 个答案: