What events are triggered when calling fetch() on a Backbone.js collection?

In my backbone.js app, there is a Trips collection that holds Trip models, which is working with LocalStorage. I am able to call Trips.create(form_attributes) to create and save a trip to the Todos store.

When I first load my app, I call Trips.fetch({ success: trips_fetch_success }), and trips_fetch_success receives a response that shows the Trip models that the Trips collection holds.

I have tried to bind refresh and change events to the Trips collection, but these events are not being caught, making me believe I have the wrong idea about which events Trips.fetch triggers.

My question: which events should Trips.fetch trigger? And are the events triggered on the collection or on each of the individual Trip models?

Solution 1:

Collection.fetch() will call reset on success, which in turn will trigger a 'reset' event. Any subscribers to the collections reset event should receive the event.

The key here is "on success." I had this problem, only to discover that backbone was silently swallowing my errors messages. Pass in an error handler that, at least, logs to console.log(), and see what's happening:

trips.fetch({error: function() { console.log(arguments); }});

(Note: Old versions of backbone.js will trigger "refresh" instead of "reset")

Solution 2:

If you are using backbone 1.0, you'll need to pass reset:true in the fetch() call in order to bind with the reset event:

trips.fetch({reset: true});

Solution 3:

As of backbone 1.0, model.fetch() triggers a 'sync'. That's what you should bind to.

Here's the relevant part from the backbone.js source where the 'sync' event is fired:

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === void 0) options.parse = true;
  var model = this;
  var success = options.success;
  options.success = function(resp) {
    if (!model.set(model.parse(resp, options), options)) return false;
    if (success) success(model, resp, options);

    // HERE'S THE TRIGGER!
    model.trigger('sync', model, resp, options);

  };
  wrapError(this, options);
  return this.sync('read', this, options);
},