Overriding Backbone Sync to use diiferent calls for fetch/save/destroy

Question

The reason I'm late to the backbone party is because I'm worried it wont play nicely with my existing webservice. I have even got to the point where I'm using my own version of backbones controllers and models, but its fruitless to just write my own, (certainly) worse, implementation.

I am using a Asp.net web service, so, on the assumption we are updating a user model I use the following three calls:

myservice/deleteUser.aspx?id=1
myService/getUser.aspx?id=1
myService/setUser.aspx? //post model

I don't see how this works with backbones sync ? I assume I'd have to overwrite fetch/save and destroy?

I'd be really grateful for some good examples. I have read around the subject, including the annotated source, but I'm struggling for the "ah ha" moment.

> *I am using a restful web service...`deleteUser.aspx`...`getUser.aspx`...`setUser.aspx`* Doesn't look like it. — Roatin Marth, Nov 06 '12 at 18:22

nikoshr · Accepted Answer · 2015-10-08T07:43:17.370

13

You can provide your collections or models with a custom sync function which will be called instead of Backbone.sync when you fetch/update/destroy an element. You can then tailor the options to emit a request matching your server setup. For example,

var M = Backbone.Model.extend({

    sync: function(method, model, options) {
        options || (options = {});

       // passing options.url will override 
       // the default construction of the url in Backbone.sync

        switch (method) {
            case "read":
                options.url = "/myservice/getUser.aspx?id="+model.get("id");
                break;
            case "delete":
                options.url = "/myservice/deleteUser.aspx?id="+model.get("id");
                break;
            case "update":
                options.url = "/myService/setUser.aspx";
                break;
        }

        if (options.url)
            return Backbone.sync(method, model, options);
    }

});

var c = new M({id: 1});
c.fetch();
c.save();
c.destroy();

And a Fiddle simulating these calls http://jsfiddle.net/nikoshr/4ArmM/

If using PUT and DELETE as HTTP verbs bothers you, you can force a POST by adding Backbone.emulateHTTP = true; See http://jsfiddle.net/nikoshr/4ArmM/1/ for a revised version.

edited Oct 08 '15 at 07:43

answered Nov 06 '12 at 16:21

nikoshr

32,926
33
91
105

Ok, this is a big help. fiddles are useful. I will have a go at this this evening! Thanks. – Jon Wells Nov 06 '12 at 16:32
One more question, how do I override the service domain? for the whole application? I assume thats in Backbone.sync too? – Jon Wells Nov 07 '12 at 08:27
@CrimsonChin You mean your service is on a different domain than your app? You'll have to investigate on CORS requests and that too would go in a sync override – nikoshr Nov 07 '12 at 09:09
Thats correct. Service is on a different domain. I have CORS up and running fine just not sure how to do the same in backbone.js. Thanks – Jon Wells Nov 07 '12 at 09:23
Once you have CORS working simple use the full url: options.url = `http://yourservice.yourapplication.com/myService/setUser...` – parliament Mar 28 '13 at 23:57
How does one do a global ovveriding ? – vini May 13 '15 at 18:19
@vini you would modify the prototypes of Backbone.Model.sync or Backbone.Collection.sync or even override Backbone.sync but that really depends on what you want to achieve – nikoshr May 14 '15 at 06:55
I want to have a custom header and custom urls for my Backbone sync and not ovveride it per model My question: http://stackoverflow.com/questions/30230661/overide-backbone-sync-globally-with-browserify – vini May 14 '15 at 06:59

Overriding Backbone Sync to use diiferent calls for fetch/save/destroy

1 Answers1