javascript - backbone.js 中的绑定(bind)和 _.bindAll

Question

我对绑定(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;
    }
});

Answer 1

呸--长问题;)

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 将拾取它。

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