CODEWITHSUNDEEP
backbone.js
benhowdle89
benhowdle89

Reputation: 37504

Make sure AJAX request is complete before firing the route in Backbone

We have a horrible asynchronous situation whereas, we need certain AJAX requests to complete before the Router fires it's routes.

How can I make sure that certain AJAX requests have fired before Backbone Router fires any route?

More of a conceptual question I know, but any advice is appreciated!

Upvotes: 1

Views: 835

Answers (2)

neeebzz
neeebzz

Reputation: 11538

@nikoshr is correct.

Another approach could be prevent automatic routing on click event and then trigger the route event manually when the ajax responses are done. 

$.when(xhr1, xhr2).then(function () { 
   router.trigger("route", "route-name", any_args);
});

Upvotes: 0

nikoshr
nikoshr

Reputation: 33364

Routes will fire only when Backbone.history.start is called :

start Backbone.history.start([options])
When all of your Routers have been created, and all of the routes are set up properly, call Backbone.history.start() to begin monitoring hashchange events, and dispatching routes.

This means that you can achieve what you want by waiting for your Ajax requests to complete before making this call.

Assuming you use jQuery>=1.5 as your $ of choice and that your Ajax requests are model fetches, you could use the Deferred objects returned by model.fetch to synchronize your actions:

var Router = Backbone.Router.extend({
    routes: {
        '': 'index'
    },

    index: function() {
        console.log('route')
    }
});

var M = Backbone.Model.extend({
    url: '/echo/json/?delay=1'
});

var r = new Router();
var m1 = new M();
var m2 = new M();

var xhr1 = m1.fetch(),
    xhr2 = m2.fetch();

$.when(xhr1, xhr2).then(function() {
    console.log('requests');
    Backbone.history.start();
});

And a Fiddle to play with http://jsfiddle.net/nikoshr/fnsqU/

Upvotes: 2

Related Questions