Backbone.js动态多级路由

Backbone.js dynamic multilevel routes

本文关键字：路由 多级 动态 js Backbone      更新时间：2023-09-26

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

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

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

尝试类似的路由器。如果需要，我们可以使用requires，只加载需要渲染的页面。您只需要遵循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
 });
相关文章：