RequireJS supports the loader plugin which enables a module to be a plugin and uses the AMD system to load web resources in an efficient manner.

When there are many templates or the template has a large size, embedding template in the page is not a good choice for front-end performance reason. It would be better to use Text.js to load the separate template files and inject them as dependencies.

Text.js which is a native AMD module also depends on the module dependency predefined by the AMD loader. Thanks to the native AMD support of eXo Platform, it is straightforward to declare and use Text.js in eXo Platform:

<module>

  <name>text</name>

  <script>

    <path>/requirejs/js/plugins/text.js</path>

  </script>

  <depends>

    <module>module</module>

  </depends>

</module>

Now you can use the mustache and text modules to load templates and render them in your own module:

<portlet>

  <name>foo</name>

  <module>

    ...

    <depends>

      <module>mustache</module>

    </depends>

    <depends>

      <module>text</module>

      <as>tmpl</as>

      <resource>/path/to/template.html</resource>

    </depends>

  </module>

</portlet>

You have the text module in the dependency list with a <resource> tag, Text.js will load that resource template and inject it with the tmpl name. Here is the JavaScript of the portlet:

function(mustache, tmpl) {
  var html = mustache.render(tmpl);
  //append rendered html to DOM
})(mustache, tmpl);