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

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 2

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",
}

Answer 3

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.