绑定和_.bindAll Backbone.js的中 [英] Binding and _.bindAll in backbone.js
问题描述
我感到困惑的Backbone.js的约束力和 _bind.All 的目的。下面是创建一个模态视图 #modal 并呈现出从评论后端获取工作code。
首先，在下面的code，我在初始化函数 _。bindAll（这一点，渲染，renderComments '）; 。不管是不是我做的 _。bindAll（），我打电话没有问题 this.render（）和 this.renderComments（）在初始化（）。是否有当 _中的任何实例。bindAll（）将帮助我们，当它不会呢？
ModalView = Backbone.View.extend（{
EL：$（'＃模式）， 模板：_.template（$（'＃tpl_modal'）HTML（）。） 初始化：功能（）{
_.bindAll（在此，呈现，renderComments'）;
this.render（）;
this.renderComments（）;
}， 渲染：功能（）{
$（this.el）.fadeIn（快）追加（this.template（this.model.toJSON（this.model）））。
}， renderComments：功能（）{
this.commentList =新CommentCollection（）;
VAR自我=这一点;
this.commentList.fetch（{
数据：{POST_ID：this.model.id}，
过程数据：真实，
成功：函数（）{
self.commentListView =新CommentListView（{集合：self.commentList}）;
}
}）;
}
}）;
和
CommentListView = Backbone.View.extend（{
EL：.modal_comments'， 初始化：功能（）{
this.render（）;
}， 渲染：功能（）{
VAR自我=这一点;
this.collection.each（功能（评论，指数）{
$（self.el）.append（新CommentListItemView（{模式：评论}）渲染（）EL）;
}）;
返回此;
}
}）;
其次，我感到困惑prepending 这一点。的东西。例如，在 renderComments ，为什么不能我使用：
VAR commentList =新CommentCollection（）;
VAR自我=这一点;
commentList.fetch（{....}）;
有关行 this.commentList =新CommentCollection（）; ，不是实例化类等 CommentCollection（） ，它使 commentList ModalView ？
此外，它是需要有 VAR自我=这一点; ，并使用 self.commentListView 后回调功能？可以绑定这样用我可以访问 this.commentListView ，或者是使用 VAR自=此做的传统方式事？
最后，应该 self.commentListView =新CommentListView（{集合：self.commentList}）; 在成功的函数 renderComments 移动到 CommentListView 的代替方法初始化并绑定到 this.collection.on（'复位'）; 至prevent嵌套太多的功能呢？这将导致：
ModalView = Backbone.View.extend（{
EL：$（'＃模式）， 模板：_.template（$（'＃tpl_modal'）HTML（）。） 初始化：功能（）{
_.bindAll（在此，呈现，renderComments'）;
this.render（）;
this.renderComments（）;
}， 渲染：功能（）{
$（this.el）.fadeIn（快）追加（this.template（this.model.toJSON（this.model）））。
}， renderComments：功能（）{
this.commentList =新CommentCollection（）;
this.commentListView =新CommentListView（{集合：this.commentList}）;
this.commentList.fetch（{
数据：{POST_ID：this.model.id}，
过程数据：真
}）;
}
}）;CommentListView = Backbone.View.extend（{
EL：.modal_comments'， 初始化：功能（）{
this.collection.on（复位，this.render，这一点）;
}， 渲染：功能（）{
VAR自我=这一点;
this.collection.each（功能（评论，指数）{
$（self.el）.append（新CommentListItemView（{模式：评论}）渲染（）EL）;
}）;
返回此;
}
}）;
唷 - 长的问题（S）;）
1）我以前当我第一次用骨干做 _。bindAll 在我的初始化方法，但因为我已经停止了。它通常不需要，除非你绑定事件，然后它真的很有帮助。例如，如果您有：
事件：
{
点击：clickHandler事件
}，
clickHandler事件：函数（）{
//做很酷的东西
}
然后是有帮助的做 _。bindAll（这一点，'clickHandler事件'），否则你的这个指针荣获' T代表视图
2）如果我理解你的问题： commentList 成为你的 ModalView 的实例的属性。
3）使用 VAR自我=这一点; 是比较常见的，但在许多情况下，可避免因过载Underscore.js（这是骨干网的依赖。 JS）。例如，大多数的采集功能（地图，每个等）采取环境作为最后一个参数。所以不是
VAR自我=这一点;
_.map（[1,2]，函数（项目）{
self.sum = self.sum +项目;
}）;
你可以这样做：
_。图（[1,2]，函数（项目）{
this.sum = this.sum +项目;
}， 这个）;
如果你的情况，你可以取代你的成功法
成功：_.bind（函数（）{
this.commentListView =新CommentListView（{集合：this.commentList}）;
}， 这个）;
如果你想在这个指针的有点混乱问题的更多信息，它的建议如下优秀教程：<一href=\"http://bonsaiden.github.com/JavaScript-Garden/#function.this\">http://bonsaiden.github.com/JavaScript-Garden/#function.this
4）是 - 我会呈现移动到重置。如果这样，别的东西引起集合的复位视图将它捡起来。
希望我回答你所有的问题。
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;
}
});
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.
这篇关于绑定和_.bindAll Backbone.js的中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
