Как использовать domReady requireJS плагин правильно

Question

Вот мой main.js перед использованием 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(); 
}); 

И 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's initialize function 
     MainFrameInitializer.initialize(); 
     FlowsViewsInitializer.initialize(); 
     EditModuleInitializer.initialize(); 
     ApplicationStateSandbox.startCheckStatus(); 
     ModulesNavigationSandbox.navigate(Constants.Modules.Home); 
     // Router.initialize(); 
     }; 

     return { 
     initialize : initialize 
     }; 
    }); 

Все работает хорошо, пока я не optimize проекта. Я выяснил, что сценарий начинает работать до того, как DOM готов, что было не так до оптимизации. Во всяком случае, я хочу использовать плагин domReady, чтобы сначала загрузить DOM.

Но, по-видимому, я понятия не имею, как это сделать правильно. Вот новая версия 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); 
}); 

Очень аккуратный и очень неправильно, потому что app загружается параллельно с domReady до DOM готова.

Как исправить это?

Спасибо.

EDIT

Я думаю, что я понял нашу проблему. Функции конструктора зависимостей app не должны запускать какой-либо зависимый от DOM код. Они должны просто возвращать функции, захватывая зависимую от DOM логику. Эта логика должна быть выполнена от app.initialize, которая гарантируется, когда DOM готов.

Answer 1

Может быть, я что-то не хватает, но не вы бы сделать вашу жизнь намного проще, выполнив:

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

в вашем main.js?

Answer 2

Если следовать документ по адресу: http://requirejs.org/docs/jquery.html, вам будет предложено внедрить требуется-JQuery библиотеку в голове документа:

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

Однако, если вы посмотрите на исходный код для примера, доступны на github, вы увидите, что «требует-jquery.js» генерируется простой конкатенации требует Lib файла и Jquery Lib файл:

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

Это означает, что вы могли бы заменить скрипт встраивать в головной части со следующим скрипт внедряется в любом месте вашего документа (например, в самом низу его).

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

Поскольку JQuery Lib определяет себя как модуль:

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

Вы можете после этого использовать JQuery в качестве ссылки требуется в любом из вашего сценария. Например:

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

Answer 3

Требуя приложение из внутри функции обратного вызова domReady, вы должны быть в состоянии требовать модуль domReady, а затем модуль приложения синхронно.

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