Skip to content

Documentation Updates #169

Merged
merged 3 commits into from Feb 14, 2012
View
44 src/Website/Views/Documentation/HtmlTemplates_MustacheHoganJS.cshtml
@@ -0,0 +1,44 @@
+@{
+ ViewBag.Title = "Cassette | Mustache Template Compilation";
+}
+
+<h1>Mustache Template Compilation</h1>
+
+<p>Cassette enables you to pre-compile <a href="http://mustache.github.com/mustache.5.html">Mustache</a> templates into JavaScript on the server-side
+ and render them using <a href="http://twitter.github.com/hogan.js/">Hogan.js</a>. 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.</p>
+
+<p>The compiled template functions are loaded into a configurable global variable.</p>
+
+<h2>Bundle configuration</h2>
+
+<p>To enable this feature, use the following bundle configuration:</p>
+
+<pre><code>bundles.Add&lt;<span class="code-type">HtmlTemplate</span>&gt;(
+ <span class="string">"HtmlTemplates"</span>
+ <span class="comment">// Assign the Hogan processor to the HTML template bundles</span>
+ bundle => bundle.Processor = <span class="keyword">new</span> <span class="code-type">HoganPipeline</span>() {
+ JavaScriptVariableName = "templates"
+ }
+);</code></pre>
+
+<p>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".</p>
+
+<h2>Using in pages</h2>
+<p>In a view page, reference your templates just like any other bundle:</p>
+<pre><code><span class="code-tag">@@{</span>
+ <span class="code-type">Bundles</span>.Reference(<span class="string">"HtmlTemplates"</span>);
+}</code></pre>
+<p>Also, tell Cassette where to render the HTML required to include the templates:</p>
+<pre><code><span class="code-tag">@@</span><span class="razor-expression"><span class="code-type">Bundles</span>.RenderHtmlTemplates()</span></code></pre>
+
+<p>Now when the page runs, instead of embedding the template sources into the page, a single script include is generated:</p>
+<pre><code><span class="open-tag">&lt;</span><span class="tag">script</span> <span class="attribute">src</span><span class="attribute-value">="/_assets/htmltemplates/HtmlTemplates_7d879cec"</span> <span class="attribute">type</span><span class="attribute-value">="text/javascript"</span><span class="close-tag">&gt;</span><span class="open-tag">&lt;/</span><span class="tag">script</span><span class="close-tag">&gt;</span></code></pre>
+
+<p>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.</p>
+
+<p>Templates will be accessible via the global object. To render a template using Hogan.js using the render method:</p>
+
+<pre><code>var myHtml = templates['myTemplate'].render(myData);</code></pre>
View
11 src/Website/Views/Documentation/Stylesheets_DataUris.cshtml
@@ -4,11 +4,12 @@
<h1>Data URIs</h1>
<p>Warning: This feature is still experimental!</p>
-<p>Cassette can convert CSS images into data-URIs. Enable this feature with the following configuration.</p>
+<p>Cassette can convert CSS images (under 32kB) and fonts (TTF or OTF) into data-URIs. Enable this feature with the following configuration.</p>
<pre><code>bundles.Add&lt;StylesheetBundle&gt;(
"styles",
b => b.Processor = new StylesheetPipeline
- {
- ConvertImageUrlsToDataUris = true
- }
-);</code></pre>
+ .EmbedImages(path => path.Contains("/embed/"))
+ .EmbedFonts(path => path.Contains("/embed/"))
+);</code></pre>
+<p>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.</p>
View
1 src/Website/Views/Documentation/_Documentation.cshtml
@@ -64,6 +64,7 @@
<ul>
<li>@DocLink("html-templates/jquery-tmpl", "jQuery-tmpl Compilation")</li>
<li>@DocLink("html-templates/knockoutjs-jquery-tmpl", "KnockoutJS")</li>
+ <li>@DocLink("html-templates/mustache-hoganjs", "Mustache/Hogan.js")</li>
</ul>
</li>
</ul>
View
3 src/Website/Website.csproj
@@ -248,6 +248,9 @@
<ItemGroup>
<Content Include="Views\Documentation\Configuration_AddFile.cshtml" />
</ItemGroup>
+ <ItemGroup>
+ <Content Include="Views\Documentation\HtmlTemplates_Hogan.cshtml" />
+ </ItemGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Something went wrong with that request. Please try again.