無法渲染backbone.js集合視圖。在我的初始化函數中獲取「Uncaught TypeError：無法調用方法」

Question

我是backbone.js的新手，並且無法識別爲什麼我的視圖在coupons.js的第67行上未定義。我發佈了一個要點，因爲它們很長的文件。另外，如果我刷新瀏覽器一堆，最終它工作得很好，然後我再次刷新，它會中斷，我可以再次刷新，直到它工作，然後再次，直到它中斷。痛苦的週期。

Gist for coupons.js and offers.js

Answer 1

此錯誤，當您嘗試調用一個方法的對象是空/未定義的發生。問題在於，您爲offerList提取數據的調用是異步的，但是您正在同步地實例化集合視圖。也就是說，這CouponCollectionView的構造：

this.collection.on('add remove', this.render, this); 

獲取調用而收集仍然是空：

var coupons = null; 
$.getJSON('http://localhost:3000/api/coupons.json', function(response){ 
    coupons = new CouponCollection(response); 
    app.coupons = coupons; 
}); 

你可能要考慮使用var coupons = new CouponCollection()，並呼籲coupons.fetch() - 這樣，該集合將立即實例化，並準備在視圖中調用您的on。

---

設置的集合，使您可以撥打fetch：

var CouponCollection = Backbone.Collection.extend({ 
    model: Coupon, 

    // tell Backbone where to send the "fetch" request 
    url: 'http://localhost:3000/api/coupons.json' 
}); 

立即實例化的集合，它叫fetch：

var coupons = new CouponCollection(); 
coupons.fetch(); 

添加reset監聽到集合（當fetch完成時觸發），並在處理程序中呈現視圖：

this.couponCollectionView = new app.CouponCollectionView({collection: this.couponList}); 
var self = this; 
this.couponList.on("reset", function() { 
    $('#content').empty().append(self.couponCollectionView.render().el); 
});