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.

Answer 2

It looks like this happens because this._index is only set within the ajax callback. Because this is asynchronous, there is no guarantee that it will have executed before the index event handler triggers.

According to the docs, the models you need on initial load should be bootstrapped.

If that's not possible, one way to structure this code might be to fetch your data when the route is hit, and bind a reset event to your view, e.g.

var CategoriesView = Backbone.View.extend({
    initialize: function() {
        this.collection.on("reset", this.render);

    },

    ...

var AppRouter = Backbone.Router.extend({

    _index: null,
    _todos: null,

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

    initialize: function(options){
        var self = this;

        self._todos = new TodosCollection();
        self._index = new CategoriesView({ collection: self._todos });
    },

    index: function(){
        this._todos.fetch();
    },

You'd also need to setup your collection to construct an appropriate URL to request data/todolist.json.

Answer 3

Your problem is the order of your routes. Routes are evaluated in order so the "*action" will ALWAYS match.

Try:

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