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,
    _subtodos: null,

    routes: {
        "*action": "index",
        "category/:name": "hashcategory"  
    },

    initialize: function(options){
        var self = this;
        if (this._index === null){
            $.ajax({
                url: 'data/todolist.json',
                dataType: 'json',
                data: {},
                success: function(data) {
                    self._data = data;
                    self._todos = new TodosCollection(data);
                    self._index = new CategoriesView({collection: self._todos});
                    //self._index.render(); 
                }
            });
            return this;
        }
        return this;
    },

    index: function(){
        this._index.render();
    },
 ....

But when I get started, firebug console panel always tells me this._index is null in the index function. I have to use self._index.render() at the bottom of the $.ajax success callback function to make the homepage render(which is commented out above). It seems that index function runs before the initialize function. How could that happen and how can I fix it?

By the way, in the routes, if I use "": "index", it will not work. I have to use "*action": "index". But I have learned somewhere else that the default url could be just empty string. Why can't I use it here?

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.