Plusieurs scripts avec requirejs

Question

J'ai un problème avec requirejs. Peut-être que je ne comprends pas vraiment comment cela devrait fonctionner, mais pour moi, il semble plutôt contre-productif que require ne me permette pas de scinder mon code en différents scripts indépendants. Depuis que j'utilise Play et son langage de modèle pour construire la structure de la page, j'ai essayé d'insérer une logique javascript différente dans différentes parties de la page. Par exemple: J'ai un fichier main.scala.html qui contient des composants dont chaque page a besoin, tout comme leur logique js. Quand une autre page a besoin d'une barre de navigation, je l'insère avec la logique correspondante. J'ai donc un main.js et un navigation.js. Comme ils ne dépendent que de Jquery mobile et pas les uns des autres, je voulais les charger avec des tags différents. Le deuxième script ne se charge jamais, donc mon intuition était que requirejs ne semble pas autoriser plusieurs attributs data-main sur une seule page. Donc, mes questions sont: est-il possible d'avoir plusieurs scripts indépendants dans une seule page en utilisant requirejs? Et sinon, pourquoi?

Merci à l'avance

Answer 1

L'idée est que vous avez seulement un data-main attribut qui charge le main.js, puis à l'intérieur main.js vous pouvez conditionnellement charger d'autres scripts

if (something) { 
    require(["this"], function(this) { ... }); 
} else { 
    require(["that"], function(that) { ... }); 
} 

Voir: http://requirejs.org/docs/start.html

Ou ai-je mal compris la question?

Answer 2

data-main est pour quand vous avez seulement une application requirejs votre page. Si vous en avez plusieurs, n'utilisez pas data-main. Il est tout à fait simple, voici un exemple en utilisant vos main.js et navigation.js

<script src='require.js'></script> 
<script> 
    require(['main']); 
    require(['navigation']); 
</script> 

Bien que je soutiens votre page a besoin navigation.js. Traitez chaque page comme une application. Donc, data-main comme d'habitude dans votre main.js.

Et puis à l'intérieur main.js:

// start independent load of navigation.js 
require(['navigation']); 
// load modules required for main 
require(['moduleA', 'moduleB'], function(moduleA, moduleB){ 
    // inside main.js 
});