Question

I am new to backbone.js and am having trouble pin pointing why my view is undefined on line 67 of coupons.js. I posted a gist as they are pretty long files.

Also, if I refresh the browser a bunch of times, eventually it works just fine and then I refresh again and it breaks and I can refresh again until it works and then again until it breaks. Painful cycle.

Gist for coupons.js and offers.js

Answer 1

This error occurs when you try to call a method on an object that’s null/undefined. The issue is that your call to fetch data for offerList is asynchronous, but you’re instantiating the collection view synchronously. That is, this in CouponCollectionView‘s constructor :

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

is getting called while the collection is still null:

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

You might want to consider using var coupons = new CouponCollection(), and calling coupons.fetch() — that way, the collection will be instantiated immediately, and ready for your on call in the View.

---

Set up the collection so that you can call fetch:

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

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

Instantiate the collection immediately, and call fetch on it:

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

Add a reset listener to the collection (triggers when fetch is complete), and render the view in the handler:

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