Search code examples
backbone.jsbackbone-viewsbackbone-eventsbackgrid

Backgrid catching a select-all events


(Let me preface with I am new to Backbone and Backgrid.) I am using Backgrid and select-all extension and I was having issues "catching" the event that the select all fires in my containing/parent view. I want to show a details view when a row is selected in the master grid. So, I need the select event in the grid to bubble up to the parent view so it can show the details in another view.

var view = Backbone.View.extend({
    el: '.grid',
    initialize: function () {

        var columns = [{
            name: "id",
            label: "ID",
            editable: false,
            cell: "string"
        }, {
            name: "",
            label: "Action",
            cell: "select-row"
        }];

        var grid = new Backgrid.Grid({
            columns: columns,
            collection: this.collection
        });

        $("#backgrid").append(grid.render().$el);
    });
});

Now I am thinking I want to add something like this to the view

events: {
"backgrid:select": "<name of the function i want to call>"
}

But that doesn't seem to work. Any help would be appreciated.


Solution

  • I was able to answer my own question...in the view add....

    this.collection.on('backgrid:selected', function(model, selected) { 
       //do what i need here 
    });
    

    backgrid is already triggering the event backgrid:select (which is handled via the model) but it also triggers the event backgrid:selected which bubbles up in the collection...which in turn is accessible via the parent view.

    A reference to the official API documentation pointing this out can be found here