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.

Install Cassette.JQueryTmpl

Install the package from nuget:

Install-Package Cassette.JQueryTmpl

Bundle configuration

No additional bundle configuration is required. The plug-in replaces the default HTML template pipeline.

So your configuration will still look similar to this:


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="/cassette.axd/htmltemplate/HtmlTemplates_7d879cec" type="text/javascript"></script>

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