Several scripts with requirejs

Question

I have a problem with requirejs. Maybe I really don’t understand how this should work, but for me it seems counterproductive that requirejs does not allow me to split my code into different independent scripts. Since I use Play and its template language to create the page structure, I tried to insert various JavaScript logic into different parts of the page by components. For example: I have main.scala.html that contains the components that every page needs, all together with their js logic. When another page needs a navigation bar, I insert it along with the corresponding logic. Therefore, I have main.js and navigation.js. Since they depend only on jQuery mobile and not on each other, I wanted to load them with different tags. The second script never loads, so my intuition was that requirejs doesn't seem to allow you to use multiple basic data attributes on the same page.

So my questions are: is it possible to have multiple independent scripts on the same page using requirejs? And if not, then why?

Thanks in advance

Answer 1

The idea is that you only have one data-main attribute that loads main.js , and then inside main.js you can conditionally load other scripts

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

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

Or did I misunderstand the question?

Answer 2

data-main is when you have only one requirejs application on your page. If you have several, do not use basic information. It's pretty simple, here is an example of using your main.js and navigation.js

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

Although I would say that your page needs nav.js. View each page as an app. So, the basic information is as usual in your main.js.

And then inside main.js:

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