index.html
5.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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/3.0.0/hogan-3.0.0.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="hogan-divider">
<div class="hogan-icon"></div>
</div>
<!-- Layout 5 -->
<div class="five columns">
<h4 id='rendering'>Hulk</h4>
<p>
Hulk is Hogan's command line utility. Use it to easily compile your templates as js files.
</p>
<p>
Hulk supports the <code>*</code> wilcard (even on windows) and allows you to target specific file extensions as well.</p>
<p>
</p>
</div>
<div class="ten columns offset-by-one">
<script src="https://gist.github.com/2322961.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>