Charge requireJS module inline le corps HTML?

StackOverflow https://stackoverflow.com//questions/12697238

Question

Je suis l'intégration de RequireJS dans un CMS, donc je l'ai mise sur le fond de mon modèle de page:

<html>
<body>
  {Placeholder1}
  <script src="scripts/require.js" data-main="scripts/main"></script>
  {Placeholder2}
</body>
</html>

Ensuite, sur chaque page, je voudrais créer une fonction qui tire parti de RequireJS.J'ai donc essayé de placer ce sur le bas de la page:

<html>
<body>
    <h1>Home</h1>
    <div class="slider">Slider content</div>

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

    <script type="text/javascript">
      require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
    </script>
</body>
</html>

Mais je suis 404 sur jquery, utils et le slider js fichiers.Il semble que ce n'est pas la lecture de mon main.js les configs que j'ai:

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.1.min',
        utils: 'libs/utils',
        slider: 'libs/jquery.slider.min'
    },
    shim: {
        slider: ['jquery']
    }
});

require([ 'utils' ], function (utils) {
    utils.init();
});

J'ai essayé de chargement RequireJS et main dans la page de la tête, mais a obtenu des résultats incohérents de cette façon.Parfois, jquery, utils et curseur serait chargé dans le temps et d'autres fois non.C'est comme si la ligne "exiger" sur le bas de la page n'est pas au courant de la principale RequireJS sur la page ou les règles de dépendances, mais mon point d'arrêt est atteint dans main.js donc je sais qu'il est appelé.Est-ce parce que main.js est chargé de manière asynchrone, mais mon inline "exiger" bloc sur le bas de la page est chargée sur la page de rendu?Comment puis-je contourner ce problème?

J'ai utilisé RequireJS avec succès avant, mais sans un CMS.J'ai toujours l'habitude de "définir" et des modules toujours appelé asychronously, mais n'a jamais eu à appeler RequireJS fonction inline comme ça.Toutes les idées sur la manière correcte de le faire?

Était-ce utile?

La solution

La chose importante ici est que les options de configuration sont mis en avant tous les modules sont demandés.Comme vous l'avez souligné à juste titre, il y a des conditions de course que signifient les options de configuration dans votre main.js ne sont pas chargés dans le temps.Le plus simple chemin de ronde, ce serait de mettre les options de configuration inline avant l' require.js le script est chargé.

<script>
var require = {
    baseUrl: <?= $someVar ?>,
    paths: {
        // etc
    }
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>

En bas de la page:

<script>
    require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
</script>

Voir aussi Comment RequireJS travailler avec plusieurs pages et une vue partielle?

Autres conseils

Il semble que ce qui se passe est que le MAIN.JS est chargé de manière asynchrone alors que la formation requise est appelée immédiatement.C'est pourquoi il y a des résultats incohérents.La solution consiste à ne pas utiliser l'attribut principale de données et appelez le fichier MAIN.JS via la balise de script sous la balise de script requis.js.

Vous pouvez toujours déterminer la baseurl du fichier main.js chargé en le faisant là-bas: 

//DETERMINE BASE URL FROM CURRENT SCRIPT PATH
var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'));

//CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS
require.config({
    baseUrl: baseUrl,
....

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top