RequireJS: Loading modules including templates and CSS [closed]

Question

After playing around with AMD/RequireJS I was wondering if it is a good idea to load UI modules including templates and CSS so they are completely independent from the web page.

It sounds like good, but I haven't seen this implemented in the wild so there may be pitfalls.

Think of some UI module with the following structure:

myWidget     |--img      |--main.js     |--styles.css     +--template.tpl 

All stuff in one folder. Looks very nice.

The module in main.js would look something like this:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {      // Load CSS (Pseudo Code)     var cssUrl = "myWidget/styles.css";     appendToHead(cssUrl);      return function() {         return {             render: function(data) {                   return TemplateEngine.toHtml(template, data);             }          }     } }); 

Questions are now:

1. Am I missing something?
2. Are there any plugins/concepts how to achieve this in a "standard" way?
3. Is the RequireJS optimizer able to handle the CSS part here, say concat/minify the stylesheets like it does with the JS parts?
4. Any opinions on that? Good or bad?

Answer 1

You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.

However Require.js does not explicitly support css files.

Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

Edit: Feb 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

Edit: August 2015

If you're after this sort of modularization you should look into webpack and specifically css-loader. I'm using it to pair .css files with .jsx files as a unified "module" and extract the relevant CSS into a single stylesheet at build time.