Backbone.js 动态多级路由答案

【问题标题】：Backbone.js dynamic multilevel routesBackbone.js 动态多级路由
【发布时间】：2014-09-18 00:36:05
【问题描述】：

我想创建多级动态路由，例如：-

http://localhost:4300/home/somename/somename/somename..... and so on based on dynamic inner pages

我的根配置如下：-

liveORCKlass.routers.Router = Backbone.Router.extend({
routes: {
    '': 'home',
    'home': 'home',
    'home?files=:foo': 'home',        
},
initialize: function () {

},  
home: function () {

 }
});

如何定义动态多级内页的根，请提前帮助我。

【问题讨论】：

标签： javascript jquery backbone.js routes

【解决方案1】：

尝试类似这样的路由器。如果需要，我们可以使用 requirejs 并仅加载需要渲染的页面。您只需遵循 #pageId/param1=value1;param2=value2;param3=value3 之类的 URL 模式。这使您可以添加更多参数并扩展您的应用程序。您还可以观察到仅当 pageId 更改时页面才会重新呈现，否则它只会更新页面模型的属性，您可以在页面视图中侦听和处理它们。

 var pageRootEl = $('.page-container');
 var currentPage ;
 var currentPageId = defaultPage;

 var defaultPage = 'page1';

 var paramsToObject = function(params) {
      if (!params) {
          return {};
      }
      var paramsArray = _.map(params.split(';'), function(str) {
          return str.split('=');
      });
      var obj = {};
      _.each(paramsArray, function(arr) {
          obj[arr[0]] = arr[1];
      });
      return obj;
  };


 var Router = Backbone.Router.extend({
     routes: {
         ':pageId': 'renderPage',
         ':pageId/*params': 'renderPage',
         '':'renderDefaultPage',

     },
     renderPage: function (pageId, params) {
         var paramsObject = paramsToObject(params);

         if(currentPageId === pageId && currentPage){
             currentPage.model.set(paramsObject);
             return;
         }

         if(currentPage){
             currentPage.remove();
         }
         pageRootEl.empty();


         switch (pageId) {
             case 'page1':
                 $.getScript('pages/' + pageId + ".js", function () {
                     currentPage = new Page1.View({

                     });

                     currentPage.render().$el.appendTo(pageRootEl);
                 })
                 break;

             case 'page2':
                 $.getScript('pages/' + pageId + ".js", function () {
                     currentPage = new Page2.View({
                     });
                     currentPage.render().$el.appendTo(pageRootEl);
                 })
                 break;

             case 'page3':
                 $.getScript('pages/' + pageId + ".js", function () {
                     currentPage = new Page3.View({
                     });
                     currentPage.render().$el.appendTo(pageRootEl);
                 })
                 break;
         }


     },
     renderDefaultPage: function(){
         this.renderPage(defaultPage);
     }
 })


 var router = new Router();


 Backbone.history.start({
     root: this.root
 });

【讨论】：