在backbone.js中绑定和_.bindAll

我对_bind.All中绑定和_bind.All的目的感到困惑。 下面是一个工作代码,它创建一个模态视图#modal并呈现从后端获取的注释。

首先,在下面的代码中,我有initialize函数_.bindAll(this, 'render', 'renderComments'); 。 无论我是否_.bindAll() ,我都可以在initialize()调用this.render()this.renderComments() initialize() 。 是否有任何关于_.bindAll()何时会帮助我们以及何时不会帮助我们的例子?

 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 }); } }); } }); 

 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; } }); 

其次,我很担心在this. 某事。 例如,在renderComments ,为什么我不能使用:

 var commentList = new CommentCollection(); var self = this; commentList.fetch({.... }); 

对于行this.commentList = new CommentCollection(); 除了实例化类CommentCollection() ,它是否使commentList成为ModalView的子ModalView

另外,是否有必要使用var self = this; 并在稍后的回调函数中使用self.commentListView ? 可以使用绑定,所以我可以访问this.commentListView ,或者使用var self = this是传统的做事方式吗?

最后,应该是self.commentListView = new CommentListView({ collection: self.commentList });renderComments的success函数中,将其移动到CommentListView的initialize方法,并绑定到this.collection.on('reset'); 防止嵌套太多function? 这将导致:

 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; } }); 

phew – 长问题;)

1)当我第一次使用骨干时,我曾经在初始化方法中做_.bindAll ,但我已经停止了。 除非你对事件具有约束力,否则它通常不需要,然后它才真正有用。 例如,如果你有:

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

然后执行_.bindAll(this, 'clickHandler')是有帮助的,否则你的this指针将不是视图

2)如果我理解你的问题: commentList成为你的ModalView实例的ModalView

3)使用var self = this; 相对常见,但在很多情况下可以避免因为Underscore.js中的重载(这是backbone.js的依赖)。 例如,大多数集合函数( mapeach等)都将上下文作为最后一个参数。 而不是

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

你可以做:

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

如果您的情况可以替换您的success方法

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

如果你想了解更多关于这个指针有点令人困惑的主题的信息,那么建议使用以下优秀的教程: http : //bonsaiden.github.com/JavaScript-Garden/#function.this

4)是的 – 我会将渲染移动到reset 。 这样,如果其他东西导致重置集合,视图将拾取它。

希望我回答你的所有问题。