javascript - 渲染backbone.js 集合视图时遇到问题。在我的初始化函数中获取“未捕获的类型错误：无法调用未定义的方法'on'”

Question

我是backbone.js 的新手，无法指出为什么我的观点在coupons.js 的第67 行未定义。我发布了一个要点，因为它们是很长的文件。

另外，如果我多次刷新浏览器，最终它工作得很好，然后我再次刷新它就会中断，我可以再次刷新直到它工作，然后再次刷新直到它中断。痛苦的循环。

coupons.js 和 offer.js 的要点

Answer 1

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

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