How to integrate a custom framework into backbone?

Question

I access my server using PHP and this object literal form. This object literal is converted to JSON and sent to the server where it is converted back to an object. From there I read the model property to know which model to run. Also, contained is the user token, so I know which user to retrieve model data for.

$A.Packet.define({
    model:   null,
    client:  {},
    server:  {
        smalls:   {},
        feed:   {},
        favorites: {}
    }
});

Basically the strategy is encode information into an object literal, json encode it, send it, decode it, apply server logic and send back the data in JSON form.

This is all abstracted into running

$A.Packet.push({model: self.Name});

and then pre(packet) and post(packet) ajax methods run automatically.

How can I integrate this style into backbone?

According to Backbone I can over-ride the sync() function but I want to understand best how to integrate things before hacking a way.

My code has already been converted to MV* form but I'm using dummy data to test the front-end. I want to bring the back-end up now.

The dev site is here:

http://www.arcmarks.com/dev

All of my operations are POST JSON calls which do what they need once they hit the server.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

In the annotated source of Backbone.LocalStorage there is a static method towards the end of the document called Backbone.LocalStorage.sync aliased to Backbone.localSync. This is the actual part they write the code that implements the custom sync.

They then reference Backbone.sync to Backbone.ajaxSync.
The next step implements a strategy pattern to decide which sync method to use.
Finally they overwrite Backbone.sync with a custom function to use the strategy.

This allows the developer to choose which sync type by adding properties to a models root object, in this case localStorage : new Backbone.LocalStorage(). You would just need to implement this for your own needs.

// Create your own sync method
Backbone.customSync = function(method, model, options, error) {
    // Your custom sync code here
    return $.post('http://something.somewh.ere', model.toJSON());

    // Implementing a switch statement for the method in here would
    // be a good idea :-)
}

// Create reference to original sync method
Backbone.ajaxSync = Backbone.sync;

// Get the sync strategy
Backbone.getSyncMethod = function(model) {
    if(model.customSync || (model.collection && model.collection.customSync))
        return Backbone.customSync;

    return Backbone.ajaxSync;
};

// Overwrite Backbone.sync to call getSyncMethod() to run sync tasks
Backbone.sync = function(method, model, options, error) {
    return Backbone.getSyncMethod(model)
                   .apply(this, [method, model, options, error]);
};

Now when your models have a property customSync that is a truthy value, your new sync strategy will be used.

This can all be adapted to specifically suit your needs, hope this helps.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 22 '14 at 12:51

David Barker

13,767
3
40
73

nice, have you done this before? ... basically pass in an option to choose between custom and non-custom sync method. That seems like the first and most important thing to do. – Jul 22 '14 at 13:19
Yeah, I have quite a bit of experience extending Backbones core. – David Barker Jul 22 '14 at 13:20
I'm reading the source for Sync, and I have no use for most of it, it just seems to do very little before passing everything to jQuery ajax. I've always used POST for everything, but I need to read up on CRUD. Seems archaic, why not just use ajax POST with content Type set to JSON for everything. This has worked fine in my non Backbone application. – Jul 22 '14 at 13:24
Actually, it is the other way round. Using POST for everything is more likely to be considered archaeic. Backbones sync method is set up with a specific RESTful api. Using the proper HTTP verbs for determining an action can be a much more desirable way of managing code on the backend. However if you want to use post for everything you can, you would just need to leave the determination of action up to the backend before it sends a read response to a delete request ;-). – David Barker Jul 22 '14 at 13:26
I remember looking into how to do an ajax call a while back and it seemed like the main choice was between POST and GET - http://stackoverflow.com/questions/3477333/what-is-the-difference-between-post-and-get ... this made me assume that the other methods were not used so much...but I do need to read up. – Jul 22 '14 at 15:15
You're right, they aren't used by anywhere near as many people as they should be. If you ever write RESTful API's you'll see the benefit of being able to call the same route 4 different ways. `GET /products`, `PUT /products`, `POST /products/1`, `DELETE /products/1`. Full crud with one route, very useful. – David Barker Jul 22 '14 at 18:45

How to integrate a custom framework into backbone?

1 Answers1