我对绑定(bind)和 _bind.All
的目的感到困惑在 backbone.js 中。下面是创建模态视图的工作代码 #modal
并呈现从后端获取的评论。
首先,在下面的代码中,我在 initialize
函数 _.bindAll(this, 'render', 'renderComments');
.我做不做_.bindAll()
, 我打电话没问题 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
的 child ?
另外,是否有必要var self = this;
并使用 self.commentListView
稍后在回调函数中?可以使用绑定(bind)以便我可以访问 this.commentListView
, 或者正在使用 var self = this
传统的做事方式?
最后应该self.commentListView = new CommentListView({ collection: self.commentList });
在 renderComments
的成功函数中移至CommentListView
的初始化方法而不是绑定(bind)到 this.collection.on('reset');
防止嵌套太多功能?这将导致:
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;
}
});
最佳答案
呸--长问题;)
1) 当我第一次使用 backbone 时,我曾经在我的初始化方法中执行 _.bindAll
但我已经停止了。通常不需要它,除非您绑定(bind)到事件,然后它真的很有帮助。例如,如果您有:
events:
{
'click': clickHandler
},
clickHandler: function(){
//do cool stuff
}
那么执行 _.bindAll(this, 'clickHandler')
会很有帮助,否则你的 this
指针将不会成为 View
2) 如果我理解你的问题:commentList
成为你的 ModalView
实例的属性。
3) 使用 var self = this;
是比较常见的,但在很多情况下可以避免,因为 Underscore.js(它是 backbone.js 的依赖项)中的重载。例如,大多数集合函数(map
、each
等)将上下文作为最后一个参数。所以不是
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
。这样,如果其他原因导致集合重置, View 将拾取它。
希望我回答了你所有的问题。
关于javascript - backbone.js 中的绑定(bind)和 _.bindAll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11402792/