Backbone.js how do i define a custom set of routes depending on a certain application state

Asked By: Anonymous

Currently building an app that runs on mobile phones
not related to the issue at hand, but through a certain event
the app lands in a state, either online or offline (internet available on the phone or not)

the offline app is very limited, only a few screens available)

now stop me if you catch me doing something stupid or something that i could to a lot better,
but my first thought was to have the Router have a dynamic set of routes,

much like you can define a dynamic url property on a collection.

so instead of this:

var router = Backbone.Router.extend({
    routes: {
        '' : 'homeAction',
        'categories' : 'categoriesAction',
        ...
    },
    homeAction: function(){ },
    categoriesAction: function(){ }
});

i was thinking of this:

var router = Backbone.Router.extend({
    initialize: function(){
        this.on('app:togglestate', this.toggleRoutes, this);
    },
    toggleRoutes: function () {
        var router = this;
        if(App.onlineModus)
            router.routes = { /* hash with online routes here */ };
        else
            router.routes = { /* hash with offline routes here */ };
    },
    routes: {
        '' : 'homeAction',
        'categories' : 'categoriesAction',
        ...
    },
    homeAction: function(){ },
    categoriesAction: function(){ }
});

though that aparently breaks the whole app,
as the Backbone.history.start(); throws an error, cannot call function start from undefined.
leading me to believe i the routes object is somehow used upon initialization and cannot be changed on the fly.

am i possibly thinking to far?
should i achieve this some other way?

other idea’s i had were:

• having the routes exactly like url, where the routes argument is a function returning a hash, that didn’t work either
• and now i’m thinking totally differnt, something along the lines of testing if the app is in online or offline modus in every route’s Action. though that seems too mutch i’d probably have to relay them all through a single Action, which only passes to the actual action if the route is accessible in offline modus? but i would not really have a clear idea on how to start with such a relay action without writing too mutch boilerplate code…

Solution

Answered By: Anonymous

In order to dynamically update the routes you will need to make a call to _bindRoutes() after updating the routes.

For example:

toggleRoutes: function () {
    var router = this;
    if(App.onlineModus)
        router.routes = { /* hash with online routes here */ };
    else
        router.routes = { /* hash with offline routes here */ };

    // Get rid of previous navigation history
    if(Backbone.history){
        Backbone.history == null;
    }

    // Bind the new routes
    router._bindRoutes();
}

Note that when you dynamically change the routes the history is no longer valid so you need to delete the previous history. When _bindRoutes is called it automatically instantiates a new Backbone.history when is called this.route.