如何为 backgrid 实现每行删除答案

【问题标题】：How to implement delete per row for backgrid如何为 backgrid 实现每行删除
【发布时间】：2013-07-10 20:03:02
【问题描述】：

我一直在尝试为 backgrid 行实现一个“删除”按钮。这里似乎描述了一个解决方案：

How to add a custom delete option for backgrid rows

但是，我似乎无法正常工作。这是我尝试过的：

var DeleteCell = Backgrid.Cell.extend({
    template: _.template('<button>Delete</button>'),
    events: {
      "click": "deleteRow"
    },
    deleteRow: function (e) {
      console.log("Hello");
      e.preventDefault();
      this.model.collection.remove(this.model);
    },
    render: function () {
      this.el.html(this.template());
      this.delegateEvents();
      return this;
    }
});

然后像这样使用它

var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
        renderable: false,
        // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
        cell: Backgrid.IntegerCell.extend({
            orderSeparator: ''
        })
    }, {
        name: "weight",
        label: "Hello",
        cell: DeleteCell
    },{
        name: "datemeasured",
        label: "DateMeasured",
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "datetime" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
    },{
        name: "weight",
        label: "Weight",
        cell: "number" // An integer cell is a number cell that displays humanized integers
    }];

我得到的是一个错误：

TypeError: this.el.html is not a function
[Break On This Error]   

this.el.html(this.template());

有什么建议吗？

感谢和欢呼

【问题讨论】：

标签： javascript backbone.js backgrid

【解决方案1】：

您遇到了异常，因为您尝试在错误的视图属性上调用该函数。 Backbone 视图有两种不同的方式来访问它的 el，直接在 DOM 中或作为 jQuery 对象，如下所示：

this.el - 这是对 DOM 元素的直接引用。
this.$el - DOM 元素的 jQuery 对象。

请务必记住，您需要在 $el 属性上调用 append() 和 html() 之类的函数，因为它们是 jQuery 函数。

【讨论】：

【解决方案2】：

dcarson 当然是正确的，但只是为了非常清楚地拼出我能够用来使其正常工作的渲染函数的代码，用 this.$el 代替 this.el：

render: function () {
    this.$el.html(this.template());
    this.delegateEvents();
    return this;
}

【讨论】：