Backbone.js Router initialization doesn't run immediately

Question

My code is as follows:

var AppRouter = Backbone.Router.extend({

    _data: null,
    _length: 0,
    _index: null,
    _todos: null,
    _subtodolist: null,
            


        

Answer 1

Indeed the problem here is with initialize returning before the ajax call inside it has been resolved.

What you can do is do something like the following in your entry point (typically $.ready())

var self = this,
    p = $.ajax({
    url: 'data/todolist.json',
    dataType: 'json'
});

p.done(function (data) {
    AppRouter = new Backbone.Router({data: data});
    Backbone.history.start({ pushState: true });    
});

This will fetch the routes, and then initialize the router with them as well as start Backbone.history. Obviously you don't need to do the ajax call again in initialize, just use the data passed in options.