如何实现每行删除backgrid

问题描述

我一直在试图实施backgrid行的删除按钮。一个解决方案似乎说明如下：

I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here:

How添加自定义删除backgrid行选项

不过，我似乎并没有得到它的工作。这里是我的尝试：

However, I don't seem to get it working. Here is what I tried:

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

我所得到的是错误的：

what I get is an error:

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

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

有什么建议？

感谢和放大器;欢呼声

推荐答案

你得到一个例外，因为你试图调用的错误观点属性的函数。骨干网的观点有两种不同的方式来访问它的El，要么直接在DOM或jQuery对象如下：

You are getting an exception because your trying to call the function on the wrong view property. Backbone views have two different ways to access it's el, either directly in the DOM or as a jQuery object as follows:

1. this.el - 这是一个直接引用DOM元素


2. 这$埃尔 - 。jQuery对象的DOM元素

1. this.el - This is a direct reference to the DOM element.
2. this.$el - The jQuery object for the DOM element.

其重要要记住，你需要调用的功能，如追加（）和 HTML（）的 $ EL 属性，因为它们是jQuery的功能。

Its important to remember, that you need to call functions like append() and html() on the $el property as they are jQuery functions.

这篇关于如何实现每行删除backgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！