在backbone.js中綁定和_.bindAll

Question

我對_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'); 防止嵌套太多功能？ 這將導致：

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實例的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 。 這樣，如果其他東西導致重置集合，視圖將拾取它。

希望我回答你所有的問題。