I'm trying to call render after fetch of a collection.
In my initialize method I have:
this.collection.bind('all', this.render, this);
this.collection.fetch();
In IE it seems that sometimes it tries to render, before the collection has data. Collections don't seem to have a 'change' event that can be bound to, is there a better way to ensure that the collection has been fetched before rendering?
Thanks!
EDIT:
If I refresh the page, it seems to always work, however if I click in the address bar again and the page loads, it doesn't ever work.
If you want to guarantee that data has been fetched before rendering it, then I'd suggest using jQuery's deferred
object:
this.collection.deferred = this.collection.fetch();
self = this;
this.collection.deferred.done(function() {
self.collection.render();
}
);
Basically anything you put into the function you send to done
will only be called after fetch is, well, done.
More on deferreds:
- http://lostechies.com/derickbailey/2012/02/07/rewriting-my-guaranteed-callbacks-code-with-jquery-deferred/
- http://www.erichynds.com/jquery/using-deferreds-in-jquery/
Looking at Backbone's Catalog of Events sounds like you want to listen to the reset event
The following should work:
this.collection.on('reset', this.render);
this.collection.fetch();
Normally in Backbone.js one would use on() to bind a callback to an object.
The following should definitely work, it worked for me...
instead of the below
this.collection.fetch();
use this
this.collection.fetch(async: false);