CODEWITHSUNDEEP
backbone.jsmarionette
rzschoch
rzschoch

Reputation: 358

Problems with application startup and Backbone.Marionette Modules

Unfortunately, I've problems while understanding the startup of Backbone.Marionette modules and submodules. The initializers are called multiple times instead of being called one time each.

What do I need to do to make things work in foreseeable manner?

PP = new Backbone.Marionette.Application();

PP.bind('start', function() {
    console.log('application start');

    PP.module('Routing').start();
    PP.module('Products').start();
});

PP.module('Routing', {
    startWithApp: false,
    define: function(Routing, PP, Backbone, Marionette, $, _) {
        Routing.addInitializer(function() {
            console.log('Routing.init');
        });                
    }
});

PP.module('Routing.ProductsRouting', {
    startWithApp: false,
    define: function(ProductsRouting, PP, Backbone, Marionette, $, _) {
        ProductsRouting.addInitializer(function() {
            console.log('ProductsRouting.init');
        });
    }
});

PP.module('Products', {
    startWithApp: false,
    define: function(Products, PP, Backbone, Marionette, $, _) {
        Products.addInitializer(function() {
            console.log('Products.init');
        });
    }
});

$(function() {
    PP.start();
});

(code also available as JSFiddle)

The code above outputs this lines in the console:

And this is what I expected:

And if you decide to automatically start all the modules with your app (startWithApp: true in all modules and without manually starting Routing and Products modules) the output is this:

Upvotes: 0

Views: 2226

Answers (3)

eschwartz
eschwartz

Reputation: 561

In case anyone is still having an issue with modules seeming to load in the wrong order - the solution for me was the location of Backbone.history.start().

Here was my problem:

bootstrap.js

App.start();

App.js

App = new Backbone.Marionette.Application();

var _AppRouter = Backbone.AppRouter.extend({
  appRoutes: { 
    "" : "getStarted"
  },
  controller: App
});

App.getStarted = function() {
  console.log(App.MyModule.myMethod);  // undefined
  App.MyModule.myMethod();
}

App.addInitializer(function() {
  new _AppRouter();
  Backbone.history.start();
});

App.MyModule.js

App.module("MyModule", function(MyModule, App) {
  MyModule.myMethod = function() {
    console.log("in myMethod");       // never gets called
  }
});

App.MyModule.myMethod is undefined in this example, so nothing happens when the app starts.

The problem, I discovered, is where I was calling Backbone.history.start(). I moved this call to my bootstrap.js file, so that I'm only calling my routes after all of my app modules have been properly initialized.

bootstrap.js

App.start();
Backbone.history.start();

Easy peazy.

Upvotes: 0

Derick Bailey
Derick Bailey

Reputation: 72858

this is fixed w/ v0.9.7 https://github.com/derickbailey/backbone.marionette/blob/master/changelog.md#v097-view-commit-logs

Upvotes: 3

rzschoch
rzschoch

Reputation: 358

The problem is solved by implementing this github pull request on Backbone.Marionette. But maybe Derick Bailey (creator of Backbone.Marionette) has his own opinions on this?

Upvotes: 2

Related Questions