Backbone.js的动态多路径

Question

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

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

} 
}); 

我怎么可以定义为根动态多内页请提前帮助我。

Answer 1

尝试类似这样的路由器。如果需要，我们可以使用requirejs并只加载需要渲染的页面。您只需按照＃pageId/param1 = value1; param2 = value2; param3 = value3这样的网址格式。这使您可以添加更多参数并缩放您的应用程序。您也可以观察到页面仅在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 
});