Comment utiliser le domReady requireJS plugin correctement

Voici mon main.js avant d'utiliser 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();
});

Et 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
      };
    });

Tout fonctionne très bien jusqu'à ce que je optimiser le projet. J'ai compris, que commence le script à exécuter avant que le DOM est prêt, quelque chose qui n'était pas le cas avant l'optimisation. De toute façon, je souhaite utiliser le domReady plugin assurez-vous que le DOM est chargé en premier.

Mais, apparemment, je n'ai aucune idée de comment le faire correctement. Voici la nouvelle version de 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);
});

Très soigné et très mal, parce que app est chargé en parallèle avec domReady avant que le DOM est prêt.

Comment puis-je résoudre ce problème?

Grâce.

MODIFIER

Je crois que j'ai compris notre problème. Le constructeur fonctions de la app dépendances ne doit pas exécuter n'importe quel DOM dépendant de code. Ils devraient juste retour des fonctions, la capture de la DOM dépendante de la logique. Cette logique doit être exécuté à partir de app.initialize, qui est garanti pour être exécuté lorsque le DOM est prêt.

Pourquoi est-il mauvais pour domReady et app d'être chargés en parallèle? Vous ne invoquer code de app lorsque le DOM est prêt. Ou ai-je mal compris?
Il est possible que c'est moi qui comprend mal comment la substance fonctionne. Chargement app implique le chargement de l'ensemble de l'application des dépendances (et il y en a quelques-uns), alors ces dépendances sont invoqués et les résultats sont transmis à l'application en usine de la méthode, qui renvoie le app lui-même. Si je comprends bien, les dépendances de app sont exécutés en parallèle avec domReady, ce qui signifie qu'ils peuvent s'exécuter avant que le DOM est chargé complètement.
Rien de pistes, à moins que votre usine de la fonction que vous passez à define() exécute le code. Généralement, l'usine de la fonction crée un objet avec des méthodes qui peuvent être appelées à un certain moment dans l'avenir (vous avez fait cela). Ainsi, même si un appel à define() va exécuter la fonction de fabrication, vous ne faites réel application de travailler quand vous le souhaitez. Comme vous l'avez fait en passant app.initialize à la domReady fonction. Il semble bien pour moi.
J'ai édité mon post. C'est ce que tu veux dire?

OriginalL'auteur mark | 2012-02-20

  1. 7

    Peut-être que je manque quelque chose, mais ne serait pas vous rendre votre vie beaucoup plus facile en faisant:

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

    dans votre main.js?

    Nous sommes à l'aide de jQuery, mais vous ne pouvez pas l'utiliser comme ça directement à l'avance, parce que jQuery ne se définit pas comme un module dans le requireJS sens. Il exige que certaines préparations première et nous les faisons. Notez également que app ne dépendent jQuery, c'est son premier dépendance.
    jQuery est AMD conforme depuis l'iirc 1.7. Vous pouvez toujours utiliser un chargeur si vous comptez sur certaines version précédente. Votre application et principaux, en fonction jQuery ne va pas violer n'importe quoi (jquery est toujours chargées une fois), mais il vous permettra de ne pas ajouter un autre plugin.
    OK, mais ce régime exige toujours que les méthodes de fabrique des modules sur lesquels app dépend de ne pas manipuler le DOM, parce que app dépendances sont résolues et invoquée en parallèle avec le chargement de jQuery. Le problème d'origine reste. Mais il semble que j'ai compris ce qu'est le hic ici - voir l'edit de mon post.
    Il n'y a rien qui te demande de ne pas utiliser jQuery/manipuler le dom. C'est tout simplement le simple js. C'est bien d'ajouter jQuery comme une dépendance principale de votre si vous souhaitez utiliser son prêt().
    Comme de jQuery 1.7, jQuery définira lui-même comme un module et le code ci-dessus sera valide. Avant de 1,7 vous pouvez utiliser require-jquery.js pour charger jQuery besoin de js et de le définir comme un module.

    OriginalL'auteur ggozad

  2. 7

    En exigeant l'application à partir de l'intérieur de la domReady fonction de rappel, vous devriez être en mesure d'exiger le domReady module, puis l'application du module de manière synchrone.

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

    OriginalL'auteur brent

  3. 3

    Si vous suivez la doc: http://requirejs.org/docs/jquery.html, vous serez invité à incorporer un besoin-bibliothèque jquery dans la tête de votre document:

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

    Cependant, si vous regardez le code source de l'exemple, disponibles sur github, vous verrez que "require-jquery.js" est généré par simple concaténation de l'exiger de fichier lib et la lib jquery du fichier:

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

    Qui signifie que vous pouvez remplacer le script à intégrer dans la partie de la tête avec le script suivant intègre n'importe où dans votre document (par exemple au bas de celle-ci).

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

    Parce que la lib jquery définit lui-même comme un module avec:

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

    Vous pouvez par la suite utiliser jquery comme un besoin de référence dans l'un de vos script. Par exemple:

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

    OriginalL'auteur widged