Backbone.js dynamic multilevel routes

Question

I want to create multilevel dynamic routes like:-

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

my roots configuration looks like:-

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

},  
home: function () {

 }
});

how i can define roots for dynamic multilevel inner pages please help me thanks in advance.

Answer 1

Try router similar to this. If needed we can make use of requirejs and load only pages that needs to be rendered. You just have to follow the URL pattern like #pageId/param1=value1;param2=value2;param3=value3. This lets you add more parameter and scale your application. You can also observe that page re-renders only if pageId changes, otherwise it just updates attributes of page model, which you can listen for and handle them inside page view.

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