在backbone.js中绑定和_.bindAll

Question

我对_bind.Allbackbone.js中的绑定和目的感到困惑.下面是一个工作代码,它创建一个Modal视图#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？

另外,是否有必要在后面的回调函数中var self = this;使用和使用self.commentListView？可以使用绑定,以便我可以访问this.commentListView,或使用var self = this传统的做事方式？

最后,应该self.commentListView = new CommentListView({ collection: self.commentList });在renderComments移动到CommentListView初始化方法的成功函数中并绑定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

phew - 长问题;)

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

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

那么_.bindAll(this, 'clickHandler')否则你的this指针将不是视图是有帮助的

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.这样,如果其他东西导致重置集合,视图将拾取它.

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