javascript - 在 Backbone/Require 应用程序中使用 Router 和 ineriew 渲染嵌套 View

Question

当使用主干路由器将 subview 渲染到主视图中时，存在一个我无法克服的问题。当首选从主视图内部渲染内部 View 时，也会出现同样的问题。刷新页面时会遇到这个问题。我可以详细描述如下。

1. 我有一个主页 View ，整个页面。一个主路由器引导我到那个一开始的主页 View 。 Homeview 有选项卡。单击选项卡应该通过主路由器导航的主视图中的方法显示 subview 。 subview 在选项卡栏下具有整个宽度。导航后，url有已更新。现在 subview 显示在我写的地方。如果此时第一阶段刷新页面，未到达同一阶段。因为url的，路由器会直接路由到要渲染的方法 subview 但是把它放在 dom 中的什么地方。 Homeview 不存在它的元素。

2. 如果不是路由器而是内部 View ，也应该解决这个问题用于渲染来自内部点击事件的 subview homeview，我的意思是在主路由器中没有路由来创建和在主路由器中调用 subview 的渲染。因为选项卡点击更新网址。当此时刷新页面时应用程序不知道该去哪里。就我而言，它有时会刷新，但没有问题，并且在某些情况下不渲染任何内容。

不更新选项卡点击中的网址可能是一个解决方案，但点击当然应该访问它引用的主题标签。根本不需要更新 url，因为这甚至在桌面浏览器中也是一个单页应用程序。因此，没有地方可以添加书签、返回按钮，正如 Backbone 文档中针对 Backbone.Router 所描述的那样。

有哪些方法可以解决这个问题？

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


});

[旧]

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

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

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

Multiple routers vs single router in BackboneJs