Как реализовать удаление в строке для фона

Question

Я пытался реализовать кнопку "Удалить" для фона сетки. Решение, кажется, описано здесь:

Как добавить пользовательский параметр удаления для строк сетки

Тем не менее, я не понимаю, как это работает. Вот что я попробовал:

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

Какие-либо предложения?

Спасибо и ура

Answer 1

Вы получаете исключение, потому что вы пытаетесь вызвать функцию в неправильном свойстве представления. Базовые представления имеют два разных способа доступа к нему, либо непосредственно в DOM, либо в виде объекта jQuery следующим образом:

1. this.el - Это прямая ссылка на элемент DOM.
2. this.$el - Объект jQuery для элемента DOM.

Важно помнить, что вам нужно вызывать такие функции, как append() а также html() на $el свойство, поскольку они являются функциями jQuery.

Answer 2

Конечно, dcarson верен, но просто очень ясно изложил код функции рендеринга, который я смог использовать, чтобы заставить его работать правильно, с этим.$el заменил this.el:

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