backbone.js adding a custom sync to make a loading effect

Question

i'm building a app with backbone.js, now i wanna adding a global loading effect when backbone.js is making http request to the server, this is a single page webapp, so there are lots of asynchronous http requests. I think i can modify the Backbone.sync method to make this easy. How can i do this?

Post a sample of code

// let's say there is a function to generate the loading and remove it
// mask.create();
// mask.remove();
var BookList = Backbone.Collection.extend({
    model:Book,
    url:'/api/list/1',
});

    var list = new BookList();

list.bind('reset', function(){
    $('.content').html('');
    list.each(function(book){
        self.addOne(book);
    })  
});
    list.fetch();

Matt Whipple · Accepted Answer · 2013-01-29 03:16:27Z

3

It sounds like you're looking to connect your display to the sync for UI feedback. You don't want to muddling concerns though so you don't want the sync itself to care about the presentation. The default sync implementation provides some events (and there's likely more covered in the docs):

Whenever a model or collection begins a sync with the server, a "request" event is emitted. If the request completes successfully you'll get a "sync" event, and an "error" event if not.

So you could start with binding to those events, but either way you should stick to some kind of approach where "sync" remains focused on its responsibility.

answered Jan 29, 2013 at 3:16

Matt Whipple

7,1541 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vikingmute Over a year ago

i'm adding request and sync events to my collections, and it works fine, thx for the help!

jevakallio · Accepted Answer · 2013-01-29 07:37:29Z

2

@MattWhipple is absolutely correct about separation of concerns: you shouldn't mix UI logic to the persistence layer. However that doesn't mean that you shouldn't override the Backbone.sync method, as long as you provide a decoupling mechanism to separate the concerns.

One such mechanism is the mediator pattern, i.e. using a global event bus to publish and consume messages. As it happens, Backbone provides just such a mechanism with the evented global Backbone object. You can override your sync to trigger an event:

Backbone.trigger("request:start");

And listen to it in the UI layer:

Backbone.on("request:start", callback);

In this way neither layer has to know of each other, and you can still achieve the global request handling.

Furthermore, if all you want is to catch all AJAX requests and you don't care whether they originated from Backbone, you can drop one level lower to listen to jQuery's global events and leave Backbone out of it altogether.

answered Jan 29, 2013 at 7:37

jevakallio

36k4 gold badges109 silver badges114 bronze badges

1 Comment

jevakallio Over a year ago

Wrote this on my phone. Will drop by later to add some links to resources.

Collectives™ on Stack Overflow

backbone.js adding a custom sync to make a loading effect

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related