How should I bootstrap my web app using Backbone.Marionette and requireJs

backbone-routing, backbone.js, marionette, requirejs

Solution

For the Router part you should make like this:

router.js

// router.js
define([
     'rooterController'
// some modules
],
function (Backbone, rooterController)
{
    "use strict";
    var AppRouter = Backbone.Marionette.AppRouter.extend({

        routes: {
            tasks: 'tasks',
            projects: 'projects',
            // many others  keys/values
            '*defaults': 'home'
        }
    });
    return new AppRouter({constroller: rooterController})
});

Problem

Let's say my app works but I love to learn and to find the best way of doing things. I really appreciate this post about Reducing Backbone Routers To Nothing More Than Configuration. And the following bbclonemail which is not using requires. Actually my implementation is a monolithic block (app.js, router.js). Here's my questions: 1) What should the `router module` `router.js` return? 2) How should I remove `The Callback Functions` from `router.js` ? 3) What should the `app module` `app.js` return? 4) How should I decouple the `app.js` in many others apps (for example: main, tasks, projects) app.js ``` // app.js define([ 'router' // some modules ], function (router, Backbone, HeaderView) { "use strict"; var myApp = new Backbone.Marionette.Application(); myApp.addRegions({ header: '#header', sidebar: '#sidebar', mainColumn: '#main-column', rightColumn: '#right-column' }); myApp.initHeader = function () { var headerView = new HeaderView(); myApp.header.show(headerView); } // many others many views myApp.start(); myApp.initialize = function() { router.initialize(); Backbone.history.start(); } return myApp; }); ``` router.js ``` // router.js define([ // some modules ], function (Backbone) { "use strict"; var AppRouter = Backbone.Marionette.AppRouter.extend({ routes: { tasks: 'tasks', projects: 'projects', // many others keys/values '*defaults': 'home' }, getApp: function () { var mainApp; require(['js/app'], function (app) { mainApp = app; }); return mainApp; }, home: function() { var app = this.getApp(); app.initHeader(); app.initSidebar(); app.initTaskDetails(); }, // many others callbacks }); var initialize = function() { new AppRouter; }; return { initialize: initialize }; }); ```

Original source