2

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

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

得到错误的值。

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

少了什么东西？

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

4

1 回答 1

3

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

例如，您可以像这样绑定列：

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

然后，您的 vm 上的removeItem方法将只接受 id，例如：

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

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

于 2013-04-10T14:28:17.210 回答