在獲取內容之前調用Backbone.js渲染器

Question

我發現了一些Backbone.js代碼的示例，然後我採用了這些代碼以滿足我的需要。

在獲取任何內容之前調用CommentListView的render功能。看起來，當有內容要呈現時，它不會再次調用。

後端返回兩個結果，所以這不是問題。

// Models 
window.Comment = Backbone.Model.extend(); 

window.CommentCollection = Backbone.Collection.extend({ 
    model:Comment, 
    url:"/api/comments/cosmopolitan" 
}); 


// Views 
window.CommentListView = Backbone.View.extend({ 

    tagName:'ul', 

    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 

    render:function (eventName) { 
     console.log(this.model.models); 
     _.each(this.model.models, function (comment) { 
      console.log(comment); 
      $(this.el).append(new CommentListItemView({model:comment}).render().el); 
     }, this); 
     return this; 
    } 

}); 

window.CommentListItemView = Backbone.View.extend({ 

    tagName:"li", 

    template:_.template($('#tpl-comment-list-item').html()), 

    render:function (eventName) { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    } 

}); 

// Router 
var AppRouter = Backbone.Router.extend({ 

    routes:{ 
     "":"list" 
    }, 

    list:function() { 
     this.commentList = new CommentCollection(); 
     this.commentListView = new CommentListView({model:this.commentList}); 
     this.commentList.fetch(); 

     $('#sidebar').html(this.commentListView.render().el); 
    } 
}); 

var app = new AppRouter(); 
Backbone.history.start(); 

Answer 1

fetch的行爲在Backbone 1.0.0中有所變化。從ChangeLog：

• 更名爲集合的 「更新」 到設置，並行度與同類model.set()，和對比度復位。這是取回後的默認更新機制。如果您想繼續使用「重置」，請通過{reset: true}。

而且Collection#fetch說：

取collection.fetch([options])

取模型的默認設置爲這個集合從服務器，上採集設置他們，當他們到達。 [...]當從服務器模型數據的回報，它採用設置到（智能）合併獲取的車型，除非你通過{reset: true}，

你initialize只是結合"reset"：

this.model.bind("reset", this.render, this); 

您可以綁定到"add"，"remove"和"change"事件Collection#set將產生或者你可以明確要求"reset"事件，當你fetch：

this.commentList.fetch({ reset: true }); 

幾個其他的事情，而我在這裏：

1. 由於您的CommentListView視圖是使用一個集合，而不是一個模式，你可能會想將它命名collection：

   this.commentListView = new CommentListView({collection: this.commentList}); 
   

   然後參考this.collection裏面的視圖。有關視圖構造函數如何處理其參數的詳細信息，請參閱View#initialize。

2. 收藏有各種Underscore methods mixed in所以你可以說this.collection.each(function(model) { ... })而不是_.each(this.model.models, ...)。
3. 視圖維護jQuery包裝的el的緩存版本$el因此您可以說this.$el而不是$(this.el)。
4. 請注意諸如console.log(this.model.models)之類的內容。控制檯通常會抓取一個實時參考，因此當您看起來，而不是調用console.log時，控制檯中顯示的內容將爲this.model.models的狀態。在面對計時和AJAX問題時使用console.log(this.model.toJSON())更可靠。
5. 您可能希望切換到listenTo而不是bind（AKA on），因爲它不易受內存泄漏的影響。

Answer 2

通常用於爲fetch創建偵聽器，當fetch完成並更改模型或集合時會有回調。試試這個：

var AppRouter = Backbone.Router.extend({ 

    routes:{ 
     "":"list" 
    }, 

    list:function() { 
     this.commentList = new CommentCollection(); 
     this.commentListView = new CommentListView({model:this.commentList}); 
     this.listenTo(this.commentList,'change', this.makeRender); 
     this.commentList.fetch(); 


    }, 
    makeRender: function(){ 
     $('#sidebar').html(this.commentListView.render().el); 
    } 

});