Documentation

HTML Templates

Client-side HTML templates, such as those used by jQuery-tmpl, need to be included into the page. With Cassette you can keep each HTML template in a separate file. Cassette will then insert all the referenced templates for you, wrapped in script blocks.

For example, this is part of a project directory:

HtmlTemplates/
  CustomerRow.htm
  CustomerDetail.htm

Views/
  Customer/
    List.cshtml

CassetteConfiguration.cs

The two templates files simply contain HTML.

<tr>
    <td>${ Name }<td></td>${ Address }</td>
</tr>

<div>
    <label>First name<label>
    <input type="text" name="firstname" />
</div>
<div>
    <label>Last name<label>
    <input type="text" name="lastname" />
</div>

Add a bundle in configuration

In the Cassette configuration class, we create a bundle for the directory:

public class CassetteConfiguration : ICassetteConfiguration
{
    public void Configure(BundleCollection bundles, CassetteSettings settings)
    {
        bundles.Add<HtmlTemplate>("HtmlTemplates");
    }
}

Now in the List.cshtml view, we can reference this bundle.

@{
    Bundles.Reference("HtmlTemplates");
}
<!DOCTYPE html>
<html>
<head>
    <title>Web App</title>
</head>
<body>
    ...
    @Bundles.RenderHtmlTemplates()
</body>
</html>

Running this page, results in the following output:

<!DOCTYPE html>
<html>
<head>
    <title>Web App</title>
</head>
<body>
    <p>My page</p>
    <script id="CustomerRow" type="text/html">
<tr>
    <td>${ Name }<td></td>${ Address }</td>
</tr>
    </script>
    <script id="CustomerDetail" type="text/html">
<div>
    <label>First name<label>
    <input type="text" name="firstname" />
</div>
<div>
    <label>Last name<label>
    <input type="text" name="lastname" />
</div>
    </script>
</body>
</html>

Each HTML template is embedded into the page using a non-executing script tag. The id attribute is based on the filename.

These are now ready to be used by your client-side templating engine of choice.

Extras

The web browser still has to compile HTML templates at runtime, when they are first used. Whilst this is usually fast, if you have a lot of templates or are running on a low powered device, you may want to pre-compile these.

HTML Templates can be compiled into JavaScript on the server and cached.

Cassette has built-in support for pre-compiling both jQuery-tmpl templates and KnockoutJS jQuery-tmpl templates.