Documentation

Mustache Template Compilation

Cassette enables you to pre-compile Mustache templates into JavaScript on the server-side and render them using Hogan.js. The compiled templates are cached and served to the browser as a regular script. This also provides all the benefits of Cassette's bundle versioning and caching.

The compiled template functions are loaded into a configurable global variable.

Bundle configuration

To enable this feature, use the following bundle configuration:

bundles.Add<HtmlTemplate>(
    "HtmlTemplates"
    // Assign the Hogan processor to the HTML template bundles
    bundle => bundle.Processor = new HoganPipeline() {
        JavaScriptVariableName = "templates"
    }
);

JavaScriptVariableName is an optional parameter that specifies the name of the global object your templates will be added to. The default value of JavaScriptVariableName is "JST".

Using in pages

In a view page, reference your templates just like any other bundle:

@{
    Bundles.Reference("HtmlTemplates");
}

Also, tell Cassette where to render the HTML required to include the templates:

...
  @Bundles.RenderHtmlTemplates()
  </body>
</html>

Now when the page runs, instead of embedding the template sources into the page, a single script include is generated:

<script src="/_assets/htmltemplates/HtmlTemplates_7d879cec" type="text/javascript"></script>

This script will return the templates compiled into JavaScript. Like all Cassette bundles, it is versioned and cached aggresively. So a browser only needs to download it once.

Templates will be accessible via the global object. To render a template using Hogan.js using the render method:

var myHtml = templates['myTemplate'].render(myData);