CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.js
vikingmute
vikingmute

Reputation: 412

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

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();

Upvotes: 2

Views: 499

Answers (2)

jevakallio
jevakallio

Reputation: 35890

@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.

Upvotes: 2

Matt Whipple
Matt Whipple

Reputation: 7134

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.

Upvotes: 3

Related Questions