Getting a reference to a model in an event callback

Question

I'm not sure if I'm doing this right, first time playing with Backbone.js.

I have two views with two models and I want to use the event aggregator method to fire events between the two.

The aggregator declaration:

Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);

So in one view I have a line like this that will fire the removeRow method.

this.eventAggregator.trigger("removeRow", this.row);

In another view

MyView = Backbone.View.extend({
    initialize: function() {
      this.eventAggregator.bind("removeRow", this.removeRow);
      this.model.get("rows").each(function(row) {
        // Do stuff
      }); 
    },
    removeRow: function(row) {
       // row is passed in fine
       // this.model is undefined
       this.model.get("rows").remove(row);
    }
});

I think I understand why this.model is undefined, but what can I do to maintain a reference so that I can use this.model in the callback? I thought about passing the model to the first view and then passing it back in the trigger call, but that seems to make the entire point of an event aggregator pointless. If I have the model I can just call the .remove method directly and have lost the benefit of my first view being unaware of the model. Any suggestions?

fguillen · Accepted Answer · 2012-05-30T17:10:10.950

3

I think you have binding problem.

You have two ways to assure that this will be the View instance:

1. Using `bindAll`

In your View.initialize() you can add this line:

_.bindAll( this, "removeRow" )

Interesting post of @DerickBailey about this matter

2. Using the optional third argument in your bind declaration

Like this:

this.eventAggregator.bind("removeRow", this.removeRow, this);

Backbone documentation about this matter

edited May 30 '12 at 17:10

answered May 30 '12 at 17:02

fguillen

36,125
23
149
210

I like this one the most too. It is most explicit and easily understandable. – fguillen May 30 '12 at 17:17

score 2 · Answer 2 · answered May 30 '12 at 16:55

Supply your View object as third parameter of the bind method:

this.eventAggregator.bind("removeRow", this.removeRow, this);

The third parameter is the context of calling your callback. See the docs.

Also, you can use .on() instead of .bind() which is shorter...

score 2 · Answer 3 · answered May 30 '12 at 16:55

You need to bind this so scope isn't lost. The blog link on the other answer uses underscore's bindAll

initialize: function() {
  _.bindAll(this, 'removeRow');
  this.eventAggregator.bind("removeRow", this.removeRow);
  this.model.get("rows").each(function(row) {
    // Do stuff
  }); 
},

Getting a reference to a model in an event callback

3 Answers3

1. Using bindAll

2. Using the optional third argument in your bind declaration

1. Using `bindAll`