RequireJS loading leaf modules

Question

I'm new to RequireJS but seem to be hitting a brick wall.

The trouble starts with my "app" module. I'm not sure how to tell RequireJS to load my leaf modules - packages that depend on "app".

I think I understand why - since nothing in the system depends on them and they aren't registered anywhere, but I need to deal with this case.

How can I let RequireJS know about these modules and to load them appropriately?

Cheers

//index.html
....
<script data-main="app/config" src="/assets/js/libs/require.js"></script>
....

//config.js
require.config({
    deps: [ "app" ],
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

//app.js
require(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
require(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
require(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

Hence:

• app.js depends on "jquery", "underscore", "backbone", "marionette"
• app.view.js depends on "jquery", "underscore", "backbone",
• "marionette", "app" app.route.js depends on "backbone", "app"

Answer 1

As stated in the docs -> http://requirejs.org/docs/api.html#config dependencies are defined in the deps array. They are the first thing that's loaded when require.js is run, it's really mostly used when you have to define dependencies before you load require.js.

this is what your structure should look like

//config.js
require.config({
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

require(['app']);

//app.js
define(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
define(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
define(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

Bear in mind that all your libraries and modules need to be AMD compliant and if you want to use app as a path like in app.view.js then you need to define it as one. The same with egis, because you can't load modules like so [ "Backbone", "App" ] if they are not defined in require.config as paths.

Answer 2

This is how I startup:

// main.js
define(["jquery", "app", "router"], function ($, App) {
  "use strict";
  // domReady plugin maybe best used here?
  $(function() {
    App.start();
  });
});

// app.js
define(["backbone", "marionette"], function (Backbone) {
  "use strict";
  var app = new Backbone.Marionette.Application();
  app.on("initialize:after", function(options){
    if (Backbone.history){
      Backbone.history.start();
    }
  });

  return app;
});

// router.js
define(["backbone", "controller", "marionette"], function(Backbone, controller) {
  "use strict";
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
        "": "index"
    }
  });
  return new Router({
    controller: controller
  });
});

// controller.js
define(["view"], function(View) {
  return {
    "index": {
      new View(); // Do what you like here…
    }
  }
});

// view.js
define(["backbone"], function(Backbone) {
  // view here
});

I assume that the dependency to router.js could be put on app.js but basically the call to Backbone.history.start() needs routers to be loaded. The router has a dependency on the controller. It's the controller that has all the dependencies to the views etc that is used by it. There could be models and collections etc.

Hope that helps.