I've come to this solution lately, joining up App and Router in the main.js file:
App.js
define(['marionette'], function(Marionette) {
var App;
App = new Backbone.Marionette.Application();
App.vars = {};
App.addRegions({
headerRegion: "#header-region",
mainRegion: "#main-region",
footerRegion: "#footer-region",
dialogsRegion: "#dialogs"
});
App.vent.on("routing:started", function() {
Backbone.history.start();
});
return App;
});
Router.js
define(['marionette', 'app'], function(Marionette, App) {
var appRouter, routerController;
routerController = {
showViaggi: function() {
return require(['modules/viaggi/viaggi'], function(Viaggi) {
App.Modules.viaggi = new Viaggi();
return App.Modules.viaggi.start();
});
}
};
return appRouter = Backbone.Marionette.AppRouter.extend({
appRoutes: {
'viaggi': 'showViaggi'
},
controller: routerController
});
});
And the Main.js, my initial script loaded with Require.js
define(['app', 'routers/appRouter'], function(App,appRouter) {
App.addInitializer(function() {
App.Router = new appRouter;
return App.vent.trigger("routing:started");
});
return App.start();
});