Question

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

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

我的root配置如下： -

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

},  
home: function () {

 }
});

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

Answer 1

尝试与此类似的路由器。如果需要，我们可以使用requirejs并仅加载需要呈现的页面。您只需遵循URL模式，如＃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
 });

Backbone.js动态多级路由

1 个答案: