How to implement delete per row for backgrid
backbone.js, backgrid, javascript
Solution
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:
- `this.el` - This is a direct reference to the DOM element.
- `this.$el` - The jQuery object for the DOM element.
Its important to remember, that you need to call functions like `append()` and `html()` on the `$el` property as they are jQuery functions.
Problem
I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here: How to add a custom delete option for backgrid rows 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; } }); ``` and then using it like ``` 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()); ``` Any suggestions? Thanks & cheers