呈现主干.js集合视图时遇到问题。在我的初始化函数中获取"Uncaught TypeError: Cannot call method 'on' of undefined"

Question

我是骨干网的新手.js并且很难指出为什么我的观点在优惠券的第 67 行上没有定义.js。我发布了一个要点，因为它们是相当长的文件。

此外，如果我刷新浏览器很多次，最终它工作得很好，然后我再次刷新，它中断

，我可以再次刷新直到它工作，然后再次刷新直到它中断。痛苦的循环。

优惠券.js和优惠的要点.js

Answer 1

当您尝试在 null/未定义的对象上调用方法时，会发生此错误。 问题是，为offerList提取数据的调用是异步的，但您正在同步实例化集合视图。 也就是说，这在CouponCollectionView的构造函数中：

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

在集合仍为 null 时被调用：

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);
});