Binding and _.bindAll in backbone.js

Question

I am confused about binding and the purpose of `_bind.All` in backbone.js. Below is a working code that creates a Modal view `#modal` and renders out comments fetched from the backend. Firstly, in the code below, I have in the `initialize` function `_.bindAll(this, 'render', 'renderComments');`. Whether or not I do `_.bindAll()`, I have no problems calling `this.render()` and `this.renderComments()` inside `initialize()`. Are there any examples of when `_.bindAll()` will help us and when it will not? ``` ModalView = Backbone.View.extend({ el: $('#modal'), template: _.template( $('#tpl_modal').html() ), initialize: function() { _.bindAll(this, 'render', 'renderComments'); this.render(); this.renderComments(); }, render: function() { $(this.el).fadeIn('fast').append( this.template( this.model.toJSON( this.model ) ) ); }, renderComments: function() { this.commentList = new CommentCollection(); var self = this; this.commentList.fetch({ data: { post_id: this.model.id}, processData: true, s…

Accepted Answer

phew--long question(s) ;)

1) I used to do `_.bindAll` in my initialize methods when I was first using backbone but I have since stopped. It's not normally needed unless you're binding to events and then it's really helpful. For example if you have:

```
events:
{
    'click': clickHandler
},
clickHandler: function(){
    //do cool stuff
}
```

then it's helpful to do `_.bindAll(this, 'clickHandler')` otherwise your `this` pointer won't be the view

2) If i understand your question: `commentList` becomes a property of your instance of `ModalView`.

3) using `var self = this;` is relatively common, but in many cases can be avoided because of overloads in Underscore.js (which is a dependency of backbone.js). For instance, most of the collection functions (`map`, `each`, etc) take a context as the last parameter. so instead of

```
var self = this;
_.map([1,2], function(item){
    self.sum = self.sum + item; 
});
```

you can do:

```
_.map([1,2], function(item){
    this.sum = this.sum + item; 
}, this);
```

if your case you could replace your `success` method with

```
success: _.bind(function() {
             this.commentListView = new CommentListView({ collection: this.commentList });
         }, this);
```

If you want more info on the somewhat confusing subject of this pointers, it's suggest the following excellent tutorial: http://bonsaiden.github.com/JavaScript-Garden/#function.this

4) Yes--I would move the rendering to the `reset`. that way if something else causes a reset of the collection the view will pick it up.

Hope I answered all your questions.

Binding and _.bindAll in backbone.js

Solution

Problem