How to use domReady requireJS plugin correctly

Question

Here is my main.js before using domReady:

require.config({ paths : { loader : 'libs/backbone/loader', jQuery : 'libs/jquery/jquery-module', Underscore : 'libs/underscore/underscore-module', Backbone : 'libs/backbone/backbone-module', templates : '../Templates' } }); require([ 'app' ], function(app) { app.initialize(); }); 

And app.js:

 define([ 'jQuery', 'Underscore', 'Backbone', 'router', 'services/Initializers/MainFrameInitializer', 'services/Initializers/FlowsViewsInitializer', 'services/Initializers/EditModuleInitializer', 'services/Sandboxes/ModulesNavigationSandbox', 'services/Sandboxes/ApplicationStateSandbox', 'DataModel/Constants' ], function($, _, Backbone, Router, MainFrameInitializer, FlowsViewsInitializer, EditModuleInitializer, ModulesNavigationSandbox, ApplicationStateSandbox, Constants) { var initialize = function() { // Pass in our Router module and call it initialize function MainFrameInitializer.initialize(); FlowsViewsInitializer.initialize(); EditModuleInitializer.initialize(); ApplicationStateSandbox.startCheckStatus(); ModulesNavigationSandbox.navigate(Constants.Modules.Home); // Router.initialize(); }; return { initialize : initialize }; }); 

Everything works fine until I optimize the project. I found out that the script starts working before the DOM is ready, something that was wrong before the optimization. Anyway, I want to use the domReady plugin to make sure the DOM is loaded first.

But apparently I have no idea how to do it right. Here is the new version of main.js:

 require.config({ paths : { loader : 'libs/backbone/loader', jQuery : 'libs/jquery/jquery-module', Underscore : 'libs/underscore/underscore-module', Backbone : 'libs/backbone/backbone-module', templates : '../Templates' } }); require([ 'domReady', 'app' ], function(domReady, app) { domReady(app.initialize); }); 

Very neat and very wrong, because the app loads in parallel with domReady until the DOM is ready.

How to fix it?

Thanks.

EDIT

I think I understood our problem. The app dependency constructor functions should not run any DOM-dependent code. They should simply return functions, capturing DOM-dependent logic. This logic must be executed from app.initialize , which is guaranteed to be executed when the DOM is ready.

Answer 1

Perhaps I missed something, but you would not have made your life much easier:

 require(['jQuery', 'app' ], function(jQuery, app) { jQuery(function ($) { app.initialize(); }); }); 

in main.js ?

Answer 2

When you require an application inside the domReady callback function, you should be able to require the domReady module and then the application module synchronously.

 define(['require', 'domReady'], function(require, domReady) { domReady(function() { require(['app'], function(app) { app.initialize(); }); }); }); 

Answer 3

If you follow the document: http://requirejs.org/docs/jquery.html , you will be asked to embed the require-jquery library at the top of your document

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

However, if you look at the source for the example made on github , you will see that 'require-jquery. Js' is generated by simply concatenating the required lib file and the jquery lib file:

  cat require.js jquery.js > ../jquery-require-sample/webapp/scripts/require-jquery.js 

This means that you could replace the embedding of the script in the head with the next script being inserted anywhere in the document (for example, at the bottom).

  <script src="libs/require.js"></script> <script src="libs/jquery-1.8.0.js"></script> <script>require(["main"]);</script> 

Since jquery lib defines itself as a module with:

  define( "jquery", [], function () { return jQuery; } ); 

After that, you can use jquery as a link to the query in any of your script. For instance:

  require(["jquery"], function($) { }