Modifying your urls on the fly using the request method with sync in backbone.js

Yeah that’s a long title, Backbone provides one default url for all your types of request with your models. But what if you want to be able to change your url model that is synching with your api depending of the type of request? Well that’s what we are here to do.

Backbone Sync

Sync is a nice utility used by backbone when you request your server to sync your model. Each time your request a change, backbone call sync, for you it is basically an empty shell for doing operations before the request is launched.

What we will do here is create 3 urls depending if we edit, create, or delete a model. To that end we will add a new function that with handle 3 new urls in your model definition:

methodUrl:  function(method){
	if(method == "delete"){
    		return "http://www.api.com/mymodel/" + this.attributes.id+"/delete";
    	}else if(method == "update"){
                return "http://www.api.com/mymodel/" + this.attributes.id+"/update";
        }else if(method == "create"){
                return "http://www.api.com/mymodel/create";
        } 
    	return false;
}

That’s nice, but from where these methods come? Well they come from backbone, backbone tells you what type of action is happening in sync, so to that end we will have to modify sync:

sync = function(method, model, options) {
    if (model.methodUrl && model.methodUrl(method.toLowerCase())) {
      	options = options || {};
      	options.url = model.methodUrl(method.toLowerCase());
    }
   Backbone.sync(method, model, options);
}

Sync is really nice, it provides you a lot of information, here we check if our methodUrl function returns an url and override our current one, and if it does not? Well it just lets the default url alone and continues normally.

Using sync globally

You could define your sync method on each model separately but that would be a pain, instead a nice idea is to apply it to every model modifying the backbone model prototype:

    Backbone.Model.prototype.sync = function(method, model, options) {
    	if (model.methodUrl && model.methodUrl(method.toLowerCase())) {
      		options = options || {};
      		options.url = model.methodUrl(method.toLowerCase());
    	}
   		Backbone.sync(method, model, options);
  	}

And there you go!

Cedric Dugas is a front-end veteran with more than 9 years under the belt, between his open source projects & entrepreneurial ambitions he is a product architect at CakeMail. Why don't you follow him on twitter.

5 Comments on "Modifying your urls on the fly using the request method with sync in backbone.js"

  1. joaquinfreshoutus says:

    This blog is awesome, please keep up the good work, we use Backbone in our apps and your articles have been very helpful :)

  2. Javier says:

    Nice! Tks!!!

  3. Nicole says:

    Hi there, its pleasant post on the topic of media print, we all be aware of media
    is a wonderful source of data.

  4. org.gr says:

    Hi, this weekend is pleasant in favor of me, as this occasion i
    am reading this wonderful educational article here at
    my home.

  5. Robbie says:

    Excellent site you have here.. It’s difficult to find high quality writing like yours these days. I truly appreciate people like you! Take care!!

    Also visit my web page – bed bugs (Robbie)

Got something to say? Go for it!