Nested views rendering with Router and inneriew in Backbone/Require app

Question

When Backbone Routers is used for rendering subviews into a main view there is an issue I cannot overcome. Same issue when inner view rendering from inside the home view preferred. This is faced when the page is refreshed. I can describe them in detail as follows.

1. I have a homeview, whole page. A mainrouter directed me to that homeview at the beginning. Homeview has tabs. Clicking tabs should show a subview by a method in homeview navigating by mainrouter. Subviews are whole width under tab bar. After navigated, url has been updated. Now subview is shown in the place I wrote. If at this stage one refreshes the page,this same stage is not reached. Because of the url, directly the router will route to the method to render the subview but where to put it in dom. Homeview is not there with its element.

2. This also should be solved in case when not routers but inner views are used to render the subviews from click events inside the homeview, I mean without routes in the main router to create and call render of the subviews in the main router. Because tab clicks updates the url. And When one refreshes the page at this point app knows no where to go. In my case it sometimes refreshes with no problem and in some cases do not render anything.

Not updating the url in tab clicks can be a solution, but of course click should visit the hashtag it references. Updating the url is not necessary at all since this is even in desktop browser a single page application. So no place to be bookmark-able, back button-able, as Backbone documentation describes for Backbone.Router.

What are the ways to overcome this issue?

Answer 1

Update

http://www.geekdave.com/2012/04/05/module-specific-subroutes-in-backbone/

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();

});

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


});

[OLD]

There are various ways you can do this, the way I prefer is :

var Router = Backbone.Router.extend({
  initialize : function(){
    app.homeView = new HomeView({el:"body"});   //I prefer calling it ShellView
  },
  routes : {
    "subView/*":"renderS",
  },
  renderSubViewOne : function(params){
    app.homeView.renderSubView('one',params);
  }
});    


var HomeView = Backbone.View.extend({
  renderSubView:function(viewName, params){
    switch(viewName){
      case 'one':
         var subViewOne = new SubViewOne({el:"tab-one"},params);  //_.extend will be cleaner
      break;
    }
  }
});

Above code is just an skeleton to give an idea. If the app is complex, I suggest having multiple routers.

Multiple routers vs single router in BackboneJs