Multiple scripts with requirejs

Question

I have a problem with requirejs. Maybe I don't really get how it should be working, but for me it seems quite counterproductive that requirejs does not allow me to split up my code into different independent scripts. Since I am using Play and its template language to build up the structure of the page, I tried to insert different javascript logic into different parts of the page component-wise. For example: I have a main.scala.html which contains components that every page needs, alltogether with their js logic. When another page needs a navigation bar, I insert this together with the corresponding logic. So I have a main.js and a navigation.js. Since they are only dependent on Jquery mobile and not on each other, I wanted to load them with different tags. The second script never gets loaded so my intuition was that requirejs seems not to allow multiple data-main attributes on one page.

So my questions is: is it possible to have multiple independent scripts in one page using requirejs? And if not, why?

Thanks in advance

and my question is: where is your code? – Joseph Jun 13 '12 at 11:43 — Joseph, Jun 13 '12 at 11:43

score 3 · Answer 1 · answered Jun 13 '12 at 12:02

3

The idea is that you only have one data-main attribute that loads the main.js, 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 have I misunderstood the question?

answered Jun 13 '12 at 12:02

Karl-Bjørnar Øie

5,554
1
24
30

Yes, that was my question. It just doesn't seem to be very practical to me. But if that's the only way to do it, I will go for it. Thank You very much. – Calardan Jun 13 '12 at 12:51
1

I agree with @Calardan... the way you've described this solution, main needs to know about every script that I could possibly need in the entire site... that doesn't seem like a good separation of concerns. – Mir Jun 23 '16 at 23:36

score 1 · Answer 2 · answered Jun 21 '16 at 15:06

data-main is for when you have only one requirejs app one your page. If you have multiple, don't use data-main. It's quite simple, here is an example using your main.js and navigation.js

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

Although I would argue your page does need navigation.js. Treat each page as an app. So data-main as normal into 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
});

Multiple scripts with requirejs

2 Answers2