Backbone.js initializing multiple router.js files

Question

I am using Backbone.js require.js underscore.js to build an application. In my javascript, i have my mainrouter.js file which deals with the menu selection.

The application is broken into several sections and i wanted to have a sectionRouter.js file per section.

For some reason, when trying to load one sectionRouter.js, i get the following error

TypeError: SectionRouter is undefined

This is the code of my mainApplication.js file

define([ 
     'jquery', 
     'underscore', 
     'backbone', 
     'mainRouter', // Request mainRouter.js 
     'bootstrap',
     'sectionRouter'  // this is the
 ], function($, _, Backbone, Router,SectionRouter){ 
var initialize = function(){ // Pass in our Router module and call it's initialize function
    Router.initialize();
    initializeAnalytics();
    //Initiate a new history and controller class
    Backbone.emulateHTTP = true;
    Backbone.emulateJSON = true;           
    Backbone.history.start();                
}; 

var initializeAnalytics = function(){
    SectionRouter.initialize();
};

var initializeAll = function(){
    initialize();
    initializeAnalytics();
};

return { 
    initialize: initialize
};  
}); 

Part of the sectionRouter:

 var SectionRouter= Backbone.Router.extend({
            //restfulUrl:"http://localhost:8080/myapp/", //This is the application service 
                            //Routes tell the app what to do
            routes:{
                "analytics/consumptions":"consumptionsActions",
                "analytics/contents":"contentsActions",
                "analytics/users":"usersAction"                    
            }               
        });

 var initialize = function (){              
            var sectionConsoleRouter= new SectionRouter;                
            //map consumptionsAction routing
            sectionConsoleRouter.on('route:consumptionsActions', function(){                    
                SeriesStorage(url to call);                  
             });
   };

  return { 
            initialize: initialize
        }; 

Can you tell me if it is possible to load the mainRouter.js and the other sectionRouter.js files together please.

EDIT

Is it possible to initialize the sectionRouter inside the mainRouter?

Answer 1

You've added bootstrap to your list of define function parameters, but the list doesn't match the modules in your require array. So SectionRouter doesn't have a value (which is why you're getting "undefined").

Try:

define([ 
     'jquery', 
     'underscore', 
     'backbone', 
     'mainRouter', // Request mainRouter.js 
     'sectionRouter'  // this is the
     'bootstrap'
 ], function($, _, Backbone, Router,SectionRouter, Bootstrap){ 

There are probably other things to improve what you're trying to achieve but this will answer the question you've asked here.