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 ponent-wise. For example: I have a main.scala.html which contains ponents 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

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 ponent-wise. For example: I have a main.scala.html which contains ponents 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

• javascript
• requirejs

• and my question is: where is your code? – Joseph Commented Jun 13, 2012 at 11:43

2 Answers 2

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/docs/start.html

Or have I misunderstood the question?

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