Dynamically load JS/CSS per template with Meteor

Question

I understand a couple questions (i.e. this) of this nature have already been posted, however no solid solution has been found. From what it seems, Meteor currently lacks of the ability to dynamically load/render different UI JavaScript (i.e. uilang) or CSS files per template. In my application, I have templates that require specific JS libraries and CSS as oppose to other templates.

For example:

user.html requires -> uilang.js, user_ui_code.js, userstyle.css
admin.html requires -> uilang.js, admin_ui_code.js, admin_style.css

I would need each js/css file to render/load depending on which route gets requested (i.e. example.com/user or example.com/admin), for things like different background-colors, transitions, etc. Meteor documentation states:

Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with or in your CSS with background-image: url(/background.png). Note that /public is not part of the image URL.

So you would think that putting all your js/css/images assets in public and calling the needed files statically in head would solve the problem. Instead, it seems that the JS (CSS as well) files get concatenated and it all runs at the same time regardless of which route you are on, thus overlapping code. I'm not sure if I am missing something blatantly obvious or is this an actual issue in Meteor?

Thanks for any help.

Why not change the classes applied to you're body element when you want to change colors/background's etc? — jimmiebtlr
– jimmiebtlr, Commented Feb 4, 2015 at 22:12
We attempted that today. However, it only works to an extent. For example, uilang uses css classes on a certain section of the site to be activated. There is a ton of css and js code as well. — mclayton
– mclayton, Commented Feb 4, 2015 at 22:41
For example, the css linked on the home page gets applied to every page through out the application. — mclayton
– mclayton, Commented Feb 4, 2015 at 22:42

Dan Dascalescu · Accepted Answer · 2015-02-05 00:52:49Z

5

Meteor doesn't yet support lazy/on demand loading of resources. The feature is on the roadmap as "incremental loading".

In the meantime, have a look at numtel:publicsources and numtel:privatesources, which let you create bundles for lazy loading resources, with or without authentication.

edited Feb 5, 2015 at 0:52

answered Feb 5, 2015 at 0:44

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

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

1 Comment

mclayton Over a year ago

Awesome. Thank you so much for answering my question. I really do appreciate it.

Collectives™ on Stack Overflow

Dynamically load JS/CSS per template with Meteor

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related