Question

I’m building a Backbone application and I’m observing some behaviour I can’t place. Consider the following Collection:

window.Pictures = Backbone.Collection.extend({
  model: Picture,
  url: 'latest.json',
  parse: function(response) {
    this.foobar = 1;
  },  
  fetchPage: function() {
    this.foobar = 2;
    return this;
  }
});

On a Chrome (or Firefox) console I’ve issued the following command:

> p = new Pictures(); p.fetch(); p.fetchPage();
> p.foobar
1

When I do:

> p = new Pictures(); p.fetch()
> p.fetchPage();
> p.foobar
2

I really don’t understand this. Why is the first execution different from the second execution?

Answer 1

The fetch call is asynchronous because it involves an AJAX call to the server:

fetch collection.fetch([options])
Fetch the default set of models for this collection from the server, resetting the collection when they arrive.

And fetch will call parse:

parse collection.parse(response)
parse is called by Backbone whenever a collection’s models are returned by the server, in fetch.

So p.parse() may be called before or after p.fetchPage() depending on timing issues that are beyond your control.

In the first case:

> p = new Pictures(); p.fetch(); p.fetchPage();

fetchPage is getting called before fetch gets its response from the server and gets around to calling parse so the calling sequence ends up like this this:

1. You call p.fetch().
2. AJAX call is made.
3. You call p.fetchPage().
4. AJAX response is received.
5. The AJAX success handler calls p.parse().

In the second case:

> p = new Pictures(); p.fetch()
> p.fetchPage();

Enough time passes between the lines for the AJAX call to return before p.fetchPage() is called so things happen in the order expect purely by accident.

If you need things to happen in a certain order then you’ll need to use the success (and possibly error) callback that fetch provides:

The options hash takes success and error callbacks which will be passed (collection, response) as arguments.

So this should give you a consistent result of 2:

p = new Pictures();
p.fetch({
    success: function(collection, response) {
        collection.fetchPage();
        console.log(collection.foobar);
    }
});

Of course, if fetchPage involves an AJAX call then you’d have to add yet another layer of callbacks to get a consistent foobar value.