Backbone custom event callback arguments

Question

I'm attempting to pass an argument called newIndex in a custom event from one view to another using the trigger() function. Here's an excerpt from the first view:

var ProductListView = Backbone.View.extend({

    el: '#products',

    events:{
            sortupdate: function(event, ui){
                    ui.item.trigger('moved', ui.item.index());
            }
    }
});

The element on which the 'moved' event is being triggered is another view. Here's an excerpt from that view:

var ProductItemView = Backbone.View.extend({

    events: {
            moved: 'viewMoved'
    },

    initialize: function(){
            _.bindAll(this, 'render', 'viewMoved');
    },

    viewMoved: function(newIndex){
            anotherFunc(this.model, newIndex);
    },

});

The issue I'm having is that in the anotherFunc() call, the newIndex argument appears to be the event itself rather than the value that I passed in when I triggered the event. If I adjust the viewMoved callback to the following, it works correctly:

viewMoved: function(event, newIndex){
    anotherFunc(this.model, newIndex);
},

Is this intended functionality? Is the event itself always the first argument passed to a custom event's callback, or is something else going on here? If it's intended is this documented somewhere? I was unable to find any reference to this in the Backbone documentation.

ncksllvn ncksllvn · Accepted Answer · 2014-05-01T16:58:21

Backbone uses jQuery heavily under the hood, and your ui.item is actually a jQuery object. See the documentation for the trigger function.

In summary, you're using jQuery's trigger because ui.item is not a Backbone View. Extra parameters are always passed after the event object.

Backbone custom event callback arguments

1 Answers