backbone.js sub routing

app.js

  var MyApp = {};

  MyApp.Router = Backbone.Router.extend({
    routes: {
        // general routes for cross-app functionality
        ""                 : "showGeneralHomepage",
        "cart"             : "showShoppingCart",
        "account"          : "showMyAccount",

        // module-specific subroutes:
        // invoke the proper module and delegate to the module's 
        // own SubRoute for handling the rest of the URL 
        "books/*subroute"  : "invokeBooksModule",
        "movies/*subroute" : "invokeMoviesModule",
        "games/*subroute"  : "invokeGamesModule",
        "music/*subroute"  : "invokeMusicModule"
    },
    invokeBooksModule: function(subroute) {
      if (!MyApp.Routers.Books) { 
            MyApp.Routers.Books = new MyApp.Books.Router("books/");
        }
    },
    invokeMoviesModule: function(subroute) {
      if (!MyApp.Routers.Movies) { 
          MyApp.Routers.Movies = new MyApp.Movies.Router("movies/");
      }
    },
    invokeGamesModule: function(subroute) {
      if (!MyApp.Routers.Games) { 
          MyApp.Routers.Games = new MyApp.Games.Router("games/");
      }
    }
  });

  // Actually initialize
  new MyApp.Router();

});

books.js

MyApp.Books.Router = Backbone.SubRoute.extend({
    routes: {
        
        /* matches http://yourserver.org/books */
        ""               : "showBookstoreHomepage", 
        
        /* matches http://yourserver.org/books/search */
        "search"         : "searchBooks",           

        /* matches http://yourserver.org/books/view/:bookId */
        "view/:bookId"   : "viewBookDetail",     
   
    },
    showBookstoreHomepage: function() {
        // ...module-specific code
    },
    searchBooks: function() {
        // ...module-specific code
    },
    viewBookDetail: function() {
        // ...module-specific code
    },


});

dynamicPrefix.js

MyApp.BaseRouter = Backbone.Router.extend({
	routes:{
	    ":moduleName/*restOfTheSubRoute":"loadDynamicModule"
	},
	loadApp:function ( moduleName, restOfTheSubRoute ) {


        MyApp.LoadedModules = MyApp.LoadedModules || {};

        // check if we've already loaded this module.  if so, there
        // is no need to reload it.  the submodule's subroutes will
        // handle the URL without us doing anything here.                
        if ( !MyApp.LoadedModules[appName] ) {

			// use RequireJS or some kind of service locator to find the SubRoute implementation for "moduleName"
			var subRoute = someCodeToGetMySubRouteDefinition(moduleName);
			
			new subRoute();
        }
 
	}

    } );

});

helper.js

(function() {

  Backbone.SubRoute = Backbone.Router.extend({
    constructor: function(prefix) {
      var routes = {};

      // Prefix is optional, set to empty string if not passed
      this.prefix = prefix = prefix || "";

      // Allow for optionally omitting trailing /.  Since base routes do not
      // trigger with a trailing / this is actually kind of important =)
      if (prefix.substr(-1) != "/") {
        prefix = prefix + '/';
      }

      // Every route needs to be prefixed
      _.each(this.routes, function(callback, path) {
        if (path) {
          routes[prefix + path] = callback;
        } else {
          // If the path is "" just set to prefix, this is to comply
          // with how Backbone expects base paths to look gallery vs gallery/
          routes[prefix.substr(0, prefix.length-1)] = callback;
        }
      });

      // Must override with prefixed routes
      this.routes = routes;

      // Required to have Backbone set up routes
      Backbone.Router.prototype.constructor.call(this);

      // we've just setup subroutes for *future* changes to the URL.  but now,
      // we need to check if the *current* URL already has a subroute that we
      // should do something with, so grab the full URL of the browser...
      var hash = Backbone.history.getHash();

      // check if there is already a part of the URL that this subview cares about...
      var hashPart = hash.substr(prefix.length, hash.length);

      // ...if so, trigger the subroute immediately.  this supports the case where 
      // a user directly navigates to a URL with a subroute on the first page load.
      if (hashPart && hashPart != "") {
            Backbone.history.loadUrl(prefix + hashPart);
      }
    },
    navigate: function(route, options) {
      if (route.substr(0,1) != '/' && route.indexOf(this.prefix.substr(0,this.prefix.length-1)) != 0) {
        route = this.prefix + route;
      }
      Backbone.Router.prototype.navigate.call(this, route, options);
    }
  });
})();

largerouter.js

// Hamazon.com : We don't even know anymore...

MyApp.Router = Backbone.Router.extend({
    routes: {

        // general landing page
        ""                     : "showGeneralHomepage",

        // routes for book store
        "books"                : "showBookstoreHomepage",
        "books/search"         : "searchBooks",
        "books/view/:bookId"   : "viewBookDetail",

        // routes for movie store
        "movies"               : "showMovieHomepage",
        "movies/search"        : "searchMovies",
        "movies/view/:movieId" : "viewMovieDetail",

        // routes for online games
        "games"               : "showGamesHomepage",
        "games/search"        : "searchGames",
        "games/play/:gameId"  : "playGame",
        "games/team/"         : "joinTeam",

        // routes for streaming music
        "music"               : "showMusicHomepage",
        "music/search"        : "searchMusic",
        "music/play/song/:songId"   : "playSong",
        "music/play/album/:albumId" : "playAlbum",
        "music/play/playlist/:playlistId" : "playAlbum",
       
        // TODO: make facebook clone.  add routes.
        // TODO: i'm in ur backbone. bloating ur routz.

        // routes for user account
        "cart"         : "showShoppingCart",
        "account"      : "showMyAccount"
    },
});

mediumrouter.js

// Hamazon.com : We sell books... and movies!

MyApp.Router = Backbone.Router.extend({
    routes: {

        // general landing page
        ""                     : "showGeneralHomepage",

        // routes for book store
        "books"                : "showBookstoreHomepage",
        "books/search"         : "searchBooks",
        "books/view/:bookId"   : "viewBookDetail",

        // routes for movie store
        "movies"               : "showMovieHomepage",
        "movies/search"        : "searchMovies",
        "movies/view/:movieId" : "viewMovieDetail",

        // routes for user account
        "cart"         : "showShoppingCart",
        "account"      : "showMyAccount"
    },
});

smallrouter.js

// Hamazon.com : We sell books!

MyApp.Router = Backbone.Router.extend({
    routes: {
        ""             : "showBookstoreHomepage",
        "search"       : "searchBooks",
        "view/:bookId" : "viewBookDetail",
        "cart"         : "showShoppingCart",
        "account"      : "showMyAccount"
    },
});