javascript - How to override Backbone.sync?

backbone.js (4)

Take a look at this annotated source example where they overwrite Backbone.sync with a localstorage alternative


Basically Backbone.sync should be a function that takes 4 arguments:

Backbone.sync = function(method, model, options) { };

You need to fire either options.success or options.error depending on whether the method succeeded. The methods are in the format:

  • "create" : expected that you create the model on the server
  • "read" : expected that you read this model from the server and return it
  • "update" : expected that you update the model on the server with the argument
  • "delete" : expected that you delete the model from the server.

You need to implement those 4 methods and define whatever you want for your "server"

Of course these are only the things that Backbone.sync must implement. You may implement more methods and you may pass more paramaters back to success but it's best not to do this.

It's best to make sure it does the same as Backbone.sync does currently so that your programming to an interface rather then an implementation. If you want to switch out your modified Backbone.sync for say the localStorage one you won't have to extend it yourself to match your extended Backbone.sync"


Also do note that you can use multiple implementations of sync. Every reference to Backbone.sync is actaully (this.sync || Backbone.sync) so you just have to do something like:

var MyModel = Backbone.Model.extend({ 

    "sync": myOwnSpecificSync,


Backbone.sync is just the default global one that all models use unless the models have a sync method specifically set.

I'm trying out Backbone.js, and one of the things I'm trying is to make a call to a remote API, so I need to be able to override Backbone.sync, as I understand the documentation.

There isn't an example of how to do that in the documentation itself, and there doesn't appear to be a google group for Backbone... can someone point out an example for doing this?

I know this answer is a bit too late, and the answer from @Raynos is great, but I did it a bit differently, and maybe it would be useful for you or for any other person trying to use an API with Backbone.

Instead of overriding Backbone.sync, I overrided Backbone.ajax, because it's where the ajax request is made.

Here's an example :

// Set the default implementation of `Backbone.ajax` to proxy through to `$`.
Backbone.ajax = function() {
    var args =, 0);

    // Here, I add the OAuth token (or any other token)
    // But before, I check that data exists, if not I add it
    if (args[0]['data'] === undefined) {
        args[0]['data'] = {};
    args[0]['data']['token'] = 'any_api_token_here';

    return Backbone.$.ajax.apply(Backbone.$, args);

I typically need to override backbone's sync method when I need to only sync certain attributes. A typical implementation looks like this:

sync: function (method, model, options) { = _.pick(this.attributes, 'foo', 'bar', 'baz');
  return, method, model, options);

Standard "vanilla" JavaScript way to redirect a page:

window.location.href = 'newPage.html';

If you are here because you are losing HTTP_REFERER when redirecting, keep reading:

The following section is for those using HTTP_REFERER as one of many secure measures (although it isn't a great protective measure). If you're using Internet Explorer 8 or lower, these variables get lost when using any form of JavaScript page redirection (location.href, etc.).

Below we are going to implement an alternative for IE8 & lower so that we don't lose HTTP_REFERER. Otherwise you can almost always simply use window.location.href.

Testing against HTTP_REFERER (URL pasting, session, etc.) can be helpful in telling whether a request is legitimate. (Note: there are also ways to work-around / spoof these referrers, as noted by droop's link in the comments)

Simple cross-browser testing solution (fallback to window.location.href for Internet Explorer 9+ and all other browsers)

Usage: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 

javascript backbone.js