Using JavaScript Promises with Backbone.sync

js-promises-with-backbone-sync.js

// Example of using JavaScript Promises with Backbone.sync
// instead of the usual success()/error() callbacks.
//
// This is a totally contrived example but does demonstrate
// using promises when syncing your Backbone models and collections.

var Model = Backbone.Model.extend({
    // Some model used outside of a collection.
      urlRoot: '/models'
    }),
    Collection = Backbone.Collection.extend({
    // Some collection with a dependency on 'Model'.
      initialize: function(models, options) {
        this.dependency = options.dependency;
      },
    // By using it to build a dynamic url.
      url: function() {
         return '/models/' + this.dependency.get('type')
      }
    }), m = new Model({id: 'xyz'}), c;

// ... Any pre-sync code ...

// Now when syncing update the usual Backbone workflow with promises
Promise.cast(m.fetch()).then(function(response) {
  
  console.log(response instanceof Backbone.Model); // False, 'response' is raw server response.
  console.log(m.hasChanged()); // True, the parse()'d attributes have been set() on the model.
  
  // Now we can construct our collection passing in the resolved dependency.
  c = new Collection([], {dependency: m});
  
  // Return a promise of a fetched collection.
  return Promise.cast(c.fetch());
  
}).then(function(response) {

  // Now process the collection or chain more asynchronous actions.
  
}).catch(function(error) {
  
  // Error handling for any preceding async actions.
  // Here 'error' is a jQuery jqXHR object.

});