<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== --> <meta charset="utf-8"> <title>Hogan.js</title> <meta name="description" content=""> <meta name="author" content=""> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <!-- CSS ================================================== --> <link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/layout.css"> </head> <body> <!-- Primary Page Layout ================================================== --> <header class="hogan-hero"> <div class="stripes"></div> <div class="noise"></div> <div class="container"> <h1>Hogan.js</h1> <h3>JavaScript templating from Twitter.</h3> <a href="https://github.com/twitter/hogan.js" class="download button">View on Github</a> </div> </header> <div class="primary container"> <!-- Layout 1 --> <div class="five columns"> <h4>Getting started</h4> <p> Hogan.js is a 2.5k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates. </p> <p> If you're developing with Node.js, just use NPM to add the Hogan package. </p> <pre><code>$ npm install hogan.js</code></pre> <p> Alternatively, drop hogan.js in your browser by adding the following script. </p> <pre><code><script src="http://twitter.github.com/hogan.js/builds/{{version}}/hogan.js"></script></code></pre> </div> <div class="ten columns offset-by-one"> <script src="https://gist.github.com/1484613.js"> </script> </div> <div class="hogan-divider"> <div class="hogan-icon"></div> </div> <!-- Layout 2 --> <div class="five columns"> <h4>Templates</h4> <p> Hogan.js was developed against the mustache test suite, so everything that holds true for templates as specified <a href="//mustache.github.com/mustache.5.html">here</a>, is also the case for hogan.js. </p> <p> That means you get variables, sections, lambdas, partials, filters, and everything else you've come to expect from mustache templating - only much, much faster. </p> </div> <div class="ten columns offset-by-one"> <script src="https://gist.github.com/1484342.js"></script> </div> <div class="hogan-divider"> <div class="hogan-icon"></div> </div> <!-- Layout 3 --> <div class="five columns"> <h4>Compiling</h4> <p> Use <code>hogan.compile()</code> to precompile your templates into vanilla JS. </p> <p> It's best to serve your templates precompiled whenever you can (rather than the raw templates), as parsing is the most time consuming operation. </p> <p> </p> </div> <div class="ten columns offset-by-one"> <script src="https://gist.github.com/1484513.js"> </script> </div> <div class="hogan-divider"> <div class="hogan-icon"></div> </div> <!-- Layout 4 --> <div class="five columns"> <h4 id='rendering'>Rendering</h4> <p> Once compiled, call the <code>render()</code> method with a context and optional partials object. </p> <p> If supplying partials, you can compile them ahead of time, or pass string templates.</p> <p> </p> </div> <div class="ten columns offset-by-one"> <script src="https://gist.github.com/1575714.js"> </script> </div> <div class="sixteen columns hogan-footer"> <span class="copyright"> Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/sayrer" target="_blank">@sayrer</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br /> Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. </span> <span class="colophon"> <a href="#">Back to top</a> </span> </div> </div><!-- container --> <!-- End Document ================================================== --> </body> </html>