Garrett Murphey

Ruby & JavaScript Development

Backbone.CustomSync

March 09, 2014

Many times while building a Backbone.js application, you’ll either be working with an API wrapped by a library or non-RESTful resources. This can be a pain, and you’ll most likely end up having to override Backbone.sync with a giant switch statement. If you’re writing tests against this new sync method, it can seem near impossible to cover all the cases. Backbone.CustomSync attempts to alleviate some of that pain by extending Backbone.sync to allow for custom behavior for each of the sync procedures.

Getting Started

Backbone.CustomSync is available via both NPM and Bower. To install:

## npm
npm install -s backbone.customsync

## bower
bower install -S backbone.customsync

Backbone.CustomSync is AMD and CommonJS ready.

To use the extension, all you have to do is use Backbone.CustomSync.Model or Backbone.CustomSync.Collection in place of Backbone.Model and Backbone.Collection, respectively. For example.

var Model = Backbone.CustomSync.Model.extend({
  readSync: function (options) {
    if (successful) {
      options.sucess(this, response, options);
    } else {
      options.error(this, response, options);
    }
  },

  createSync: function (options) {
    if (successful) {
      options.success(this, response, options);
    } else {
      options.error(this, response, options);
    }
  },

  updateSync: function (options) {
    if (successful) {
      options.success(this, response, options);
    } else {
      options.error(this, response, options);
    }
  }, 

  deleteSync: function (options) {
    if (successful) {
      options.success(this, response, options);
    } else {
      options.error(this, response, options);
    }
  }
});

If you don’t define one of these sync methods – createSync, for example – and Backbone attempts to save a new model, the options.error callback will be invoked automatically. Backbone.CustomSync will only perform the operations you define.

If, for some reason, you want to use the default Backbone.sync functionality for one of your sync procedures, that’s easy.

var Model = Backbone.CustomSync.Model.extend({
  readSync: function (options) {
    this.xhrSync('read', this, options);
  }
});

Hopefully Backbone.CustomSync can make working on models and collections with unconventional Backbone resources easier and more enjoyable. As always, feel free to file an issue or submit a pull request. Enjoy!


Other Recent Posts