CODEWITHSUNDEEP
backbone.jsrequirejsmarionettestartupbootstrapping
thalisk
thalisk

Reputation: 7743

Backbone, Marionette, RequireJS application startup

I'm building an app with Backbone, Marionette and RequireJS and I'd like to run by some more experienced people if the Application startup could be refined/improved in any way.

Folder structure:

index.html
js/
  collections/
  libs/
    backbone.js
    marionette.js
    require.js
    ...
  models/
  views/
  app.js
  init.js
  router.js

Currently the app's bootstrapping is as follows.

index.html defines the requireJS entry-point as:

<script data-main="js/init" src="js/libs/require.js"></script>

init.js does the RequireJS configuration and:

require(['app'], function(App){
    App.start();
});

The App module in app.js:

App = new Backbone.Marionette.Application();

App.addInitializer(function (options) {
  // initialize the Router; will only setup the routes and corresponding callbacks; not history.start()
  App.router = new Router();
  // initialize Marionette regions
  App.addRegions({
    'header': '#header',
    'main': '#main',
    'footer': '#footer'
  });
});

App.on('start', function(options) {
  Backbone.history && Backbone.history.start() || console.error('No "Backbone.history" to .start()');
});

return App;

The Router module in router.js:

return Backbone.Router.extend({
    routes: {      
      'panel/:handle': 'showPanel',
    },

    showPanel: function (handle) {
      require(['app'], function (App) {
        App.main.show(new Panel_v({userHandle: handle}));
      });  
    }      
});

Is there a way to make the Router module less convoluted? I worked out this way to solve the cyclic dependency problem formed by App->Router->App.

Any other suggestions?

Upvotes: 2

Views: 5885

Answers (1)

Ingro
Ingro

Reputation: 2841

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

Upvotes: 6

Related Questions