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,
success: function() {
self.commentListView = new CommentListView({ collection: self.commentList });
}
});
}
});
And
CommentListView = Backbone.View.extend({
el: '.modal_comments',
initialize: function() {
this.render();
},
render: function() {
var self = this;
this.collection.each( function(comment, index) {
$(self.el).append( new CommentListItemView({ model: comment }).render().el );
});
return this;
}
});
Secondly, I am confused about prepending this.
to something. For example in renderComments
, why cant I use:
var commentList = new CommentCollection();
var self = this;
commentList.fetch({.... });
For the line this.commentList = new CommentCollection();
, other than instantiating the class CommentCollection()
, does it make commentList
a child of ModalView
?
Additionally, is it necessary to have var self = this;
and use self.commentListView
later in the callback function? Can binding be used so I can access this.commentListView
, or is using var self = this
the conventional way of doing things?
Finally, should self.commentListView = new CommentListView({ collection: self.commentList });
in the success function of renderComments
be moved to CommentListView
's initialize method instead and be binded to this.collection.on('reset');
to prevent nesting too many functions? This will result in:
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();
this.commentListView = new CommentListView({ collection: this.commentList });
this.commentList.fetch({
data: { post_id: this.model.id},
processData: true
});
}
});
CommentListView = Backbone.View.extend({
el: '.modal_comments',
initialize: function() {
this.collection.on('reset', this.render, this);
},
render: function() {
var self = this;
this.collection.each( function(comment, index) {
$(self.el).append( new CommentListItemView({ model: comment }).render().el );
});
return this;
}
});