title: How to use the domReady requireJS plugin correctly
body: <p>Here is my main.js before using domReady:</p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>And app.js:</p>
  
  <pre><code>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's initialize function
          MainFrameInitializer.initialize();
          FlowsViewsInitializer.initialize();
          EditModuleInitializer.initialize();
          ApplicationStateSandbox.startCheckStatus();
          ModulesNavigationSandbox.navigate(Constants.Modules.Home);
          // Router.initialize();
        };
  
        return {
          initialize : initialize
        };
      });
  </code></pre>
  
  <p>All works fine until I <a href="http://requirejs.org/docs/optimization.html" rel="nofollow">optimize</a> the project. I have figured out, that the script starts to run before the DOM is ready, something that was not true before the optimization. Anyway, I wish to use the <a href="http://requirejs.org/docs/api.html#pageload" rel="nofollow">domReady</a> plugin to make sure the DOM is loaded first. </p>
  
  <p>But, apparently, I have no idea how to do it correctly. Here is the new version of main.js:</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>Very neat and very wrong, because <code>app</code> is loaded in parallel with <code>domReady</code> before the DOM is ready. </p>
  
  <p>How do I fix it?</p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I think I have understood our problem. The constructor functions of the <code>app</code> dependencies should not run any DOM dependent code. They should just return functions, capturing the DOM dependent logic. That logic should be executed from <code>app.initialize</code>, which is guaranteed to be run when the DOM is ready.</p>