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

【问题标题】：Nested views rendering with Router and inneriew in Backbone/Require app在 Backbone/Require 应用程序中使用 Router 和 inneriew 渲染嵌套视图
【发布时间】：2014-12-18 10:45:27
【问题描述】：

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

我有一个主页视图，整页。一个主路由器指示我这样做开始时的主页。 Homeview 有标签。点击标签应该通过主路由器导航的主视图中的方法显示子视图。子视图是标签栏下的整个宽度。导航后，url有已更新。现在子视图显示在我写的地方。如果此时第一阶段刷新页面，未达到同一阶段。因为 url，直接路由到要渲染的方法子视图，但将其放在 dom 中的位置。 Homeview 不存在它的元素。
如果不是路由器而是内部视图，也应该解决这个问题用于从点击事件中渲染子视图 homeview，我的意思是在主路由器中没有路由来创建和调用主路由器中子视图的渲染。因为标签点击更新网址。而当此时应用程序刷新页面时不知道该去哪里。就我而言，它有时会刷新而没有问题，在某些情况下不渲染任何东西。

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

有什么方法可以解决这个问题？

【问题讨论】：

标签： javascript backbone.js

【解决方案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

【讨论】：