在Backbone/Require应用程序中使用Router和inniew渲染嵌套视图

Question

当骨干路由器用于将子视图渲染到主视图中时，存在一个我无法解决的问题。当首选从主视图内部进行内部视图渲染时，也会出现同样的问题。刷新页面时会出现这种情况。我可以详细描述如下。

1. 我有一个主页，整个页面。一个主路由器指引我去那里首页。主视图有选项卡。单击选项卡应通过主视图中的方法显示子视图，通过主路由器进行导航。子视图是选项卡栏下的整个宽度。导航后，url具有已更新。现在子视图显示在我写的地方。如果在这个第一阶段刷新页面，未达到相同的阶段。因为对于url，路由器将直接路由到要渲染的方法子视图，但将其放在dom中的何处。Homeview不在它的元素。

2. 这也应该在不是路由器而是内部视图的情况下解决用于在homeview，我的意思是在主路由器中没有路由来创建和调用主路由器中子视图的呈现。因为选项卡点击更新url。当刷新页面时，应用程序不知道该去哪里。就我而言，它有时会在没有问题，并且在某些情况下不会呈现任何内容。

不更新标签点击中的url可能是一种解决方案，但点击当然应该访问它引用的标签。更新url根本没有必要，因为这甚至在桌面浏览器中是一个单页应用程序。因此，没有地方可以像Backbone.Runer.的Backbone文档所描述的那样添加书签，返回按钮

克服这个问题的方法是什么？

Answer 1

更新

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]

有多种方法可以做到这一点，我更喜欢的方法是：

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

上面的代码只是给出一个想法的框架。如果应用程序很复杂，我建议使用多个路由器。

BackboneJs 中的多个路由器与单个路由器