diff --git a/src/Website/Views/Documentation/HtmlTemplates_MustacheHoganJS.cshtml b/src/Website/Views/Documentation/HtmlTemplates_MustacheHoganJS.cshtml new file mode 100644 index 00000000..2625aab2 --- /dev/null +++ b/src/Website/Views/Documentation/HtmlTemplates_MustacheHoganJS.cshtml @@ -0,0 +1,44 @@ +@{ + ViewBag.Title = "Cassette | Mustache Template Compilation"; +} + +

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()
+ +

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);
diff --git a/src/Website/Views/Documentation/Stylesheets_DataUris.cshtml b/src/Website/Views/Documentation/Stylesheets_DataUris.cshtml index 49344359..f772f155 100644 --- a/src/Website/Views/Documentation/Stylesheets_DataUris.cshtml +++ b/src/Website/Views/Documentation/Stylesheets_DataUris.cshtml @@ -4,11 +4,12 @@

Data URIs

Warning: This feature is still experimental!

-

Cassette can convert CSS images into data-URIs. Enable this feature with the following configuration.

+

Cassette can convert CSS images (under 32kB) and fonts (TTF or OTF) into data-URIs. Enable this feature with the following configuration.

bundles.Add<StylesheetBundle>(
     "styles",
     b => b.Processor = new StylesheetPipeline
-    {
-        ConvertImageUrlsToDataUris = true
-    }
-);
\ No newline at end of file + .EmbedImages(path => path.Contains("/embed/")) + .EmbedFonts(path => path.Contains("/embed/")) +); +

EmbedImages and EmbedFonts both accept an optional expression to tell Cassette which file paths to include. By default, Cassette +will attempt to embed all images and fonts.

\ No newline at end of file diff --git a/src/Website/Views/Documentation/_Documentation.cshtml b/src/Website/Views/Documentation/_Documentation.cshtml index e6c84dd0..d3ed1d02 100644 --- a/src/Website/Views/Documentation/_Documentation.cshtml +++ b/src/Website/Views/Documentation/_Documentation.cshtml @@ -64,6 +64,7 @@ diff --git a/src/Website/Website.csproj b/src/Website/Website.csproj index 36ea8a35..9a70c569 100644 --- a/src/Website/Website.csproj +++ b/src/Website/Website.csproj @@ -248,6 +248,9 @@ + + +