jQuery-tmpl Template Compilation

jQuery-tmpl templates are usually embedded into a page using non-executing script blocks. The browser then compiles these into JavaScript functions at runtime. This may be fast in modern browsers, but given a lot of templates and a slower mobile browser, you may notice the slow down.

Cassette enables you to pre-compile jQuery-tmpl templates into JavaScript on the server-side. 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 directly into jQuery-tmpl, with no runtime overhead.

Bundle configuration

To enable this feature, use the following bundle configuration:

    // Assign the jQuery-tmpl processor to the HTML template bundles
    bundle => bundle.Processor = new JQueryTmplPipeline()

Using in pages

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


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


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.