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:
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.