RequireJS Hogan / Mustache Plugin
Latest commit e0a35ad Jan 10, 2014 @millermedeiros Merge pull request #13 from bruce-one/patch-1
Add a template example to the README
Failed to load latest commit information.
text.js Bump text.js to 2.0.10 Sep 26, 2013


RequireJS mustache / hogan.js plugin

Load mustache / hogan.js templates dynamically during development and compile them during build to achieve greater performance.

Basic Usage

Define an external template like foo.mustache:

<div class="foo">

Load it with the hgn plugin:

// this will load the "foo.mustache" file
require(['hgn!foo'], function(foo){
    // the plugin will return the `render()` method of the `Hogan.Template`
    var markup = foo({
        title : 'Hello!',
        names : ['world', 'foo bar', 'lorem ipsum', 'nurse']

During development the template file will be loaded using the RequireJS text plugin and template will be compiled automatically. During optimization it will pre-compile the template and store it as pure JavaScript for better performance:

define("hgn!foo", ["hogan"], function(hogan){  var tmpl = new hogan.Template(function(c,p,i){var _=this;_.b(i=i||"");_.b("<div class=\"foo\">\r");_.b("\n" + i);_.b("    <h1>");_.b(_.v(_.f("title",c,p,0)));_.b("</h1>\r");_.b("\n" + i);_.b("    <ul>\r");_.b("\n" + i);if(_.s(_.f("names",c,p,1),c,p,0,71,105,"{{ }}")){,p,function(c,p,_){_.b("        <li>");_.b(_.v(_.d(".",c,p,0)));_.b("</li>\r");_.b("\n");});c.pop();}_.b("    </ul>\r");_.b("\n" + i);_.b("</div>\r");_.b("\n");return _.fl();;}, "", hogan);  return function(){ return tmpl.render.apply(tmpl, arguments); };});;

The plugin code is only required for dynamic load so you can use the r.js setting stubModules to remove the text! and hgn! plugins during build, see test/build.js for example.


This plugin also supports partials however it needs a slightly different argument to the standard hogan.js method. Eg:

require(['hgn!foo', 'hgn!bar'], function(foo, bar){
    // the plugin will return the `render()` method of the `Hogan.Template`
    var markup = foo({
        title : 'Hello!',
        names : ['world', 'foo bar', 'lorem ipsum', 'nurse']
        // note the .template, it is required because the plugin returns the `render()` method directly
        bar: bar.template


Example files are inside the test folder, to test build run:

cd test
node build

It will update the test/scripts/main_built.js file.


v0.3.1 (2013/09/26)

  • update text plugin to 2.0.10 fixing bug related to node-webkit.

v0.3.0 (2013/06/11)

  • update Hogan to v3.0

v0.2.1 (2013/02/08)

  • add template property to the compiled template.
  • fix in case config.hgn isn't defined.

v0.2.0 (2012/06/29)

  • add compilationOptions support.
  • add pragmas to remove compiler during build.
  • return Template#render method instead of the Hogan.template object.

v0.1.0 (2012/06/18)

  • initial release.


Released under the MIT license.

Other plugins

You should also check the awesome RequireJS Handlebars Plugin created by Alex Sexton and the list of plugins on RequireJS wiki.