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
– Joseph

2012-06-13 11:43:08 +00:00
Commented Jun 13, 2012 at 11:43 — Joseph
– Joseph, Commented Jun 13, 2012 at 11:43

Karl-Bjørnar Øie · Accepted Answer · 2012-06-13 12:02:10Z

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, 2012 at 12:02

Karl-Bjørnar Øie

5,5721 gold badge26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Calardan Over a year ago

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.

Mir Over a year ago

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.

dalore · Accepted Answer · 2016-06-21 15:06:36Z

1

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

answered Jun 21, 2016 at 15:06

dalore

5,8841 gold badge38 silver badges39 bronze badges

Collectives™ on Stack Overflow

Multiple scripts with requirejs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related