|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Handlebars</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Handlebars</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><style scoped> |
|
|
31 |
.handlebars-code pre.code { |
|
|
32 |
height: 100%; |
|
|
33 |
margin: 0; |
|
|
34 |
} |
|
|
35 |
|
|
|
36 |
.handlebars-code td, |
|
|
37 |
.handlebars-code th { |
|
|
38 |
background: #fff; |
|
|
39 |
padding: 0 0 0 12px; |
|
|
40 |
} |
|
|
41 |
|
|
|
42 |
.handlebars-code td:first-child, |
|
|
43 |
.handlebars-code th:first-child { padding-left: 0; } |
|
|
44 |
</style> |
|
|
45 |
|
|
|
46 |
<div class="intro"> |
|
|
47 |
<p> |
|
|
48 |
Handlebars is a simple template language inspired by <a href="http://mustache.github.com/">Mustache</a>. This component is a YUI port of the <a href="https://github.com/wycats/handlebars.js">original Handlebars project</a>. |
|
|
49 |
</p> |
|
|
50 |
|
|
|
51 |
<p> |
|
|
52 |
This guide covers the YUI port of Handlebars, which differs from the original Handlebars in only <a href="#differences-from-original-handlebars">a few minor ways</a> and is kept closely in sync with the original. The official Handlebars documentation can be found at <a href="http://handlebarsjs.com/">handlebarsjs.com</a>. |
|
|
53 |
</p> |
|
|
54 |
</div> |
|
|
55 |
|
|
|
56 |
<h2 id="getting-started">Getting Started</h2> |
|
|
57 |
|
|
|
58 |
<p> |
|
|
59 |
To include the source files for Handlebars and its dependencies, first load |
|
|
60 |
the YUI seed file if you haven't already loaded it. |
|
|
61 |
</p> |
|
|
62 |
|
|
|
63 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
64 |
|
|
|
65 |
|
|
|
66 |
<p> |
|
|
67 |
Next, create a new YUI instance for your application and populate it with the |
|
|
68 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
69 |
YUI will automatically load any dependencies required by the modules you |
|
|
70 |
specify. |
|
|
71 |
</p> |
|
|
72 |
|
|
|
73 |
<pre class="code prettyprint"><script> |
|
|
74 |
// Create a new YUI instance and populate it with the required modules. |
|
|
75 |
YUI().use('handlebars', function (Y) { |
|
|
76 |
// Handlebars is available and ready for use. Add implementation |
|
|
77 |
// code here. |
|
|
78 |
}); |
|
|
79 |
</script></pre> |
|
|
80 |
|
|
|
81 |
|
|
|
82 |
<p> |
|
|
83 |
For more information on creating YUI instances and on the |
|
|
84 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
85 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
86 |
</p> |
|
|
87 |
|
|
|
88 |
|
|
|
89 |
<h2 id="using-handlebars">Using Handlebars</h2> |
|
|
90 |
|
|
|
91 |
<h3 id="quick-start">Quick Start</h3> |
|
|
92 |
|
|
|
93 |
<p> |
|
|
94 |
A Handlebars template is just some text that contains Handlebars <a href="#basic-expressions">expressions</a> like <code>{{foo}}</code>. Although most people use Handlebars to generate HTML, it can easily generate JSON, XML, YAML, or any other plain text format.</p> |
|
|
95 |
|
|
|
96 |
<p> |
|
|
97 |
When you render a template, Handlebars evaluates expressions and replaces them with data. <a href="#block-expressions">Block expressions</a> can be used for iteration, simple if/else branching, and executing <a href="#helper-functions">helper functions</a>, but otherwise Handlebars is completely logic-less. This makes it ideal for separating content from functionality. |
|
|
98 |
</p> |
|
|
99 |
|
|
|
100 |
<p> |
|
|
101 |
First, you need to define a template string somewhere. Most template strings are long and contain lots of newlines and indentation, which makes them hard to read and maintain if you store them directly in JavaScript. A common pattern in apps that use Handlebars is to use <strong>micro-templating</strong>, which means embedding template strings in a static HTML document, wrapped in a <code><script></code> element with the attribute <code>type="text/x-handlebars-template"</code>. Thanks to the <code>type</code> attribute, the browser won't try to execute the script, and you can fetch the template string whenever you need it using <code>Y.one()</code>. |
|
|
102 |
</p> |
|
|
103 |
|
|
|
104 |
<p> |
|
|
105 |
Here's a simple micro-template that creates a list of links: |
|
|
106 |
</p> |
|
|
107 |
|
|
|
108 |
<pre class="code prettyprint lang-handlebars"><script id="list-template" type="text/x-handlebars-template"> |
|
|
109 |
<p>YUI is brought to you by:</p> |
|
|
110 |
|
|
|
111 |
<ul> |
|
|
112 |
{{#items}} |
|
|
113 |
<li><a href="{{url}}">{{name}}</a></li> |
|
|
114 |
{{/items}} |
|
|
115 |
</ul> |
|
|
116 |
</script></pre> |
|
|
117 |
|
|
|
118 |
|
|
|
119 |
<p> |
|
|
120 |
Once you have a template string, the next step is to <strong>compile</strong> that string into a Handlebars template function. You can then <strong>render</strong> the template by passing a data object (also known as a <a href="#contexts-paths">context</a>) into that function. |
|
|
121 |
</p> |
|
|
122 |
|
|
|
123 |
<pre class="code prettyprint"><script> |
|
|
124 |
YUI().use('handlebars', 'node-base', function (Y) { |
|
|
125 |
// Extract the template string and compile it into a reusable function. |
|
|
126 |
var source = Y.one('#list-template').getHTML(), |
|
|
127 |
template = Y.Handlebars.compile(source), |
|
|
128 |
html; |
|
|
129 |
|
|
|
130 |
// Render the template to HTML using the specified data. |
|
|
131 |
html = template({ |
|
|
132 |
items: [ |
|
|
133 |
{name: 'pie', url: 'http://pieisgood.org/'}, |
|
|
134 |
{name: 'mountain dew', url: 'http://www.mountaindew.com/'}, |
|
|
135 |
{name: 'kittens', url: 'http://www.flickr.com/search/?q=kittens'}, |
|
|
136 |
{name: 'rainbows', url: 'http://www.youtube.com/watch?v=OQSNhk5ICTI'} |
|
|
137 |
] |
|
|
138 |
}); |
|
|
139 |
|
|
|
140 |
// Append the rendered template to the page. |
|
|
141 |
Y.one('body').append(html); |
|
|
142 |
}); |
|
|
143 |
</script></pre> |
|
|
144 |
|
|
|
145 |
|
|
|
146 |
<p> |
|
|
147 |
After it's rendered and appended to the page, the output looks like this: |
|
|
148 |
</p> |
|
|
149 |
|
|
|
150 |
<div class="example"> |
|
|
151 |
<p>YUI is brought to you by:</p> |
|
|
152 |
|
|
|
153 |
<ul> |
|
|
154 |
<li><a href="http://pieisgood.org/">pie</a></li> |
|
|
155 |
<li><a href="http://www.mountaindew.com/">mountain dew</a></li> |
|
|
156 |
<li><a href="http://www.flickr.com/search/?q=kittens">kittens</a></li> |
|
|
157 |
<li><a href="http://www.youtube.com/watch?v=OQSNhk5ICTI">rainbows</a></li> |
|
|
158 |
</ul> |
|
|
159 |
</div> |
|
|
160 |
|
|
|
161 |
<p> |
|
|
162 |
You can re-render the template at any time simply by executing the stored <code>template</code> function again and passing in new data. Templates only need to be parsed once, which makes rendering a template multiple times very fast. |
|
|
163 |
</p> |
|
|
164 |
|
|
|
165 |
<pre class="code prettyprint">// Re-render the template with new data. No need to parse the template again. |
|
|
166 |
var html = template({ |
|
|
167 |
items: [ |
|
|
168 |
{name: 'caffeine', url: 'http://en.wikipedia.org/wiki/Caffeine'}, |
|
|
169 |
{name: 'git', url: 'http://git-scm.com/'}, |
|
|
170 |
{name: 'numberwang', url: 'http://www.youtube.com/watch?v=qjOZtWZ56lc'} |
|
|
171 |
] |
|
|
172 |
});</pre> |
|
|
173 |
|
|
|
174 |
|
|
|
175 |
<p> |
|
|
176 |
Alternatively, if you only need to render something once, you can use the convenient <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_render"><code>render()</code></a> method to parse and render a template in a single step. |
|
|
177 |
</p> |
|
|
178 |
|
|
|
179 |
<pre class="code prettyprint">// Parse and render a template in a single step. |
|
|
180 |
var html = Y.Handlebars.render(source, { |
|
|
181 |
// ... data ... |
|
|
182 |
});</pre> |
|
|
183 |
|
|
|
184 |
|
|
|
185 |
<h3 id="template-syntax">Template Syntax</h3> |
|
|
186 |
|
|
|
187 |
<h4 id="basic-expressions">Basic Expressions</h4> |
|
|
188 |
|
|
|
189 |
<p> |
|
|
190 |
A basic Handlebars expression starts with <code>{{</code>, contains some text, and ends with <code>}}</code>. These delimiters are often referred to as "mustaches", since they look a little bit like fancy mustaches if you turn your head sideways, squint a bit, and use your imagination. When a template is rendered, Handlebars will replace expressions with rendered data. |
|
|
191 |
</p> |
|
|
192 |
|
|
|
193 |
<p> |
|
|
194 |
A simple Handlebars expression looks like this: |
|
|
195 |
</p> |
|
|
196 |
|
|
|
197 |
<pre class="code prettyprint lang-handlebars"><h1>{{title}}</h1></pre> |
|
|
198 |
|
|
|
199 |
|
|
|
200 |
<p> |
|
|
201 |
This tells Handlebars: |
|
|
202 |
</p> |
|
|
203 |
|
|
|
204 |
<ol> |
|
|
205 |
<li><p>If there's a <a href="#helper-functions">helper function</a> named "title", execute it and insert its return value here.</p></li> |
|
|
206 |
|
|
|
207 |
<li><p>Otherwise, if there exists a <code>title</code> property in the current <a href="#contexts-paths">context</a>, and that property is not falsy or an empty array, insert its value here.</p></li> |
|
|
208 |
|
|
|
209 |
<li><p>Otherwise, insert an empty string.</p></li> |
|
|
210 |
</ol> |
|
|
211 |
|
|
|
212 |
<h5 id="html-escaping">HTML Escaping</h5> |
|
|
213 |
|
|
|
214 |
<p> |
|
|
215 |
By default, content rendered using a double-mustache expression like <code>{{foo}}</code> will automatically be HTML-escaped for safety. To render unescaped HTML output, use a triple-mustache expression like <code>{{{foo}}}</code>. Only use a triple-mustache expression for content you trust! Never use it to render unfiltered user input. |
|
|
216 |
</p> |
|
|
217 |
|
|
|
218 |
<p> |
|
|
219 |
Handlebars also supports an alternative <code>{{&foo}}</code> syntax to render unescaped content, but this syntax is less commonly used. That said, some people find it preferable to the triple-mustache syntax since it's easier to spot at a glance. |
|
|
220 |
</p> |
|
|
221 |
|
|
|
222 |
<h5 id="contexts-paths">Contexts & Paths</h5> |
|
|
223 |
|
|
|
224 |
<p> |
|
|
225 |
All expressions are evaluated relative to the current <strong>context</strong>. The default context for a template is the data object passed in when the template is rendered. |
|
|
226 |
</p> |
|
|
227 |
|
|
|
228 |
<p> |
|
|
229 |
Here's the default context used for the examples in the rest of this section: |
|
|
230 |
</p> |
|
|
231 |
|
|
|
232 |
<pre class="code prettyprint">{ |
|
|
233 |
site: { |
|
|
234 |
title: 'AwesomeBlog', |
|
|
235 |
url: 'http://blog.example.com' |
|
|
236 |
}, |
|
|
237 |
|
|
|
238 |
article: { |
|
|
239 |
id: 1, |
|
|
240 |
title: 'My blog is awesome' |
|
|
241 |
} |
|
|
242 |
}</pre> |
|
|
243 |
|
|
|
244 |
|
|
|
245 |
<p> |
|
|
246 |
You can change the context using a <a href="#block-expressions">block expression</a>. Inside the block, the context will be set to the value referenced in the block's opening tag. |
|
|
247 |
</p> |
|
|
248 |
|
|
|
249 |
<pre class="code prettyprint lang-handlebars"><div class="header"> |
|
|
250 |
{{#site}} |
|
|
251 |
<h1><a href="{{url}}">{{title}}</a></h1> |
|
|
252 |
{{/site}} |
|
|
253 |
</div> |
|
|
254 |
|
|
|
255 |
<div class="content"> |
|
|
256 |
{{#article}} |
|
|
257 |
<h2>{{title}}</h2> |
|
|
258 |
{{/article}} |
|
|
259 |
</div></pre> |
|
|
260 |
|
|
|
261 |
|
|
|
262 |
<p> |
|
|
263 |
Certain <a href="#built-in-block-helpers">block helpers</a> also change the context within the block. For example, when iterating over an array of items using <code>{{#each items}} ... {{/each}}</code> or <code>{{#items}} ... {{/items}}</code>, the context inside the block will be set to the current item. |
|
|
264 |
</p> |
|
|
265 |
|
|
|
266 |
<p> |
|
|
267 |
The special expression <code>{{.}}</code> always evaluates to the current context, sort of like <code>this</code> in JavaScript. In fact, <code>{{.}}</code> and <code>{{this}}</code> do exactly the same thing! This is especially useful when <a href="#each">iterating over an array of strings</a>, since it allows you to output each string value. |
|
|
268 |
</p> |
|
|
269 |
|
|
|
270 |
<p> |
|
|
271 |
Using blocks to change the context is optional. Expressions can reference deeply-nested properties using dot notation: |
|
|
272 |
</p> |
|
|
273 |
|
|
|
274 |
<pre class="code prettyprint lang-handlebars"><div class="content"> |
|
|
275 |
<h2>{{article.title}}</h2> |
|
|
276 |
</div></pre> |
|
|
277 |
|
|
|
278 |
|
|
|
279 |
<p> |
|
|
280 |
The special expression <code>../</code> references the current context's parent scope. |
|
|
281 |
</p> |
|
|
282 |
|
|
|
283 |
<pre class="code prettyprint lang-handlebars"><div class="content"> |
|
|
284 |
{{#article}} |
|
|
285 |
<h2><a href="{{../site.url}}/article/{{id}}">{{title}}</a></h2> |
|
|
286 |
{{/article}} |
|
|
287 |
</div></pre> |
|
|
288 |
|
|
|
289 |
|
|
|
290 |
<p> |
|
|
291 |
Note that <code>../</code> references the parent scope, but not necessarily the previous level in the context hierarchy. Block helpers can invoke a block with any context, so a purely hierarchical reference wouldn't make much sense. |
|
|
292 |
</p> |
|
|
293 |
|
|
|
294 |
<h4 id="block-expressions">Block Expressions</h4> |
|
|
295 |
|
|
|
296 |
<p> |
|
|
297 |
Block expressions are used to change the current <a href="#contexts-paths">context</a> or to pass a block of content to a <a href="#helper-functions">helper function</a>. A block expression starts with an opening tag prefixed by <code>#</code>, contains some content, and ends with a closing tag prefixed by <code>/</code>, similar to an HTML element. |
|
|
298 |
</p> |
|
|
299 |
|
|
|
300 |
<p> |
|
|
301 |
The following example uses the <a href="#each">built-in <code>each</code> helper</a> to iterate over an array named <code>gadgets</code> and render the block's content in the context of each item in the array. |
|
|
302 |
</p> |
|
|
303 |
|
|
|
304 |
<table class="handlebars-code"> |
|
|
305 |
<thead> |
|
|
306 |
<tr> |
|
|
307 |
<th>Template Source</th> |
|
|
308 |
<th>Data</th> |
|
|
309 |
<th>Output</th> |
|
|
310 |
</tr> |
|
|
311 |
</thead> |
|
|
312 |
|
|
|
313 |
<tbody> |
|
|
314 |
<tr> |
|
|
315 |
<td width="33%"> |
|
|
316 |
<pre class="code prettyprint lang-handlebars"><ul> |
|
|
317 |
{{#each gadgets}} |
|
|
318 |
<li>{{name}}</li> |
|
|
319 |
{{/each}} |
|
|
320 |
</ul></pre> |
|
|
321 |
|
|
|
322 |
</td> |
|
|
323 |
|
|
|
324 |
<td width="33%"> |
|
|
325 |
<pre class="code prettyprint">{ |
|
|
326 |
gadgets: [ |
|
|
327 |
{name: 'iPhone'}, |
|
|
328 |
{name: 'Android'}, |
|
|
329 |
{name: 'Windows Phone'} |
|
|
330 |
] |
|
|
331 |
}</pre> |
|
|
332 |
|
|
|
333 |
</td> |
|
|
334 |
|
|
|
335 |
<td width="33%"> |
|
|
336 |
<pre class="code prettyprint"><ul> |
|
|
337 |
<li>iPhone</li> |
|
|
338 |
<li>Android</li> |
|
|
339 |
<li>Windows Phone</li> |
|
|
340 |
</ul></pre> |
|
|
341 |
|
|
|
342 |
</td> |
|
|
343 |
</tr> |
|
|
344 |
</tbody> |
|
|
345 |
</table> |
|
|
346 |
|
|
|
347 |
<p> |
|
|
348 |
The <code>each</code> helper is so useful that Handlebars will actually use it as the default helper if you create a block expression with an identifier that points to an array value. So we could also write the template above like this and get the same result: |
|
|
349 |
</p> |
|
|
350 |
|
|
|
351 |
<pre class="code prettyprint lang-handlebars"><ul> |
|
|
352 |
{{#gadgets}} |
|
|
353 |
<li>{{name}}</li> |
|
|
354 |
{{/gadgets}} |
|
|
355 |
</ul></pre> |
|
|
356 |
|
|
|
357 |
|
|
|
358 |
<p> |
|
|
359 |
If a block expression refers to an empty array, a falsy value, or a value that doesn't exist in the current context, the block's contents won't be rendered. |
|
|
360 |
</p> |
|
|
361 |
|
|
|
362 |
<p> |
|
|
363 |
A block expression that refers to a non-array value such as an object or string will change the context to that value inside the block. See <a href="#contexts-paths">Contexts & Paths</a> for an example of this. |
|
|
364 |
</p> |
|
|
365 |
|
|
|
366 |
<h4 id="built-in-block-helpers">Built-in Block Helpers</h4> |
|
|
367 |
|
|
|
368 |
<p> |
|
|
369 |
Handlebars provides several built-in block helpers that are always available to templates. |
|
|
370 |
</p> |
|
|
371 |
|
|
|
372 |
<h5 id="each">each</h5> |
|
|
373 |
|
|
|
374 |
<p> |
|
|
375 |
The <code>each</code> helper iterates over an array. The block will be rendered once for each item, and its context will be set to the current item. |
|
|
376 |
</p> |
|
|
377 |
|
|
|
378 |
<table class="handlebars-code"> |
|
|
379 |
<thead> |
|
|
380 |
<tr> |
|
|
381 |
<th>Template Source</th> |
|
|
382 |
<th>Data</th> |
|
|
383 |
<th>Output</th> |
|
|
384 |
</tr> |
|
|
385 |
</thead> |
|
|
386 |
|
|
|
387 |
<tbody> |
|
|
388 |
<tr> |
|
|
389 |
<td width="33%"> |
|
|
390 |
<pre class="code prettyprint lang-handlebars"><h1>Bands Ryan likes</h1> |
|
|
391 |
|
|
|
392 |
<ul> |
|
|
393 |
{{#each bands}} |
|
|
394 |
<li>{{.}}</li> |
|
|
395 |
{{/each}} |
|
|
396 |
</ul></pre> |
|
|
397 |
|
|
|
398 |
</td> |
|
|
399 |
|
|
|
400 |
<td width="33%"> |
|
|
401 |
<pre class="code prettyprint">{ |
|
|
402 |
bands: [ |
|
|
403 |
'The Dandy Warhols', |
|
|
404 |
'The Brian Jonestown Massacre', |
|
|
405 |
'The Black Keys', |
|
|
406 |
'Black Rebel Motorcycle Club' |
|
|
407 |
] |
|
|
408 |
}</pre> |
|
|
409 |
|
|
|
410 |
</td> |
|
|
411 |
|
|
|
412 |
<td width="33%"> |
|
|
413 |
<pre class="code prettyprint"><h1>Bands Ryan likes</h1> |
|
|
414 |
|
|
|
415 |
<ul> |
|
|
416 |
<li>The Dandy Warhols</li> |
|
|
417 |
<li>The Brian Jonestown Massacre</li> |
|
|
418 |
<li>The Black Keys</li> |
|
|
419 |
<li>Black Rebel Motorcycle Club</li> |
|
|
420 |
</ul></pre> |
|
|
421 |
|
|
|
422 |
</td> |
|
|
423 |
</tr> |
|
|
424 |
</tbody> |
|
|
425 |
</table> |
|
|
426 |
|
|
|
427 |
<p> |
|
|
428 |
If you create a block expression with an identifier that points to an array value, Handlebars will automatically use the <code>each</code> helper to iterate over that array, so we could rewrite the template above like this and get the same result: |
|
|
429 |
</p> |
|
|
430 |
|
|
|
431 |
<pre class="code prettyprint lang-handlebars"><h1>Bands Ryan likes</h1> |
|
|
432 |
|
|
|
433 |
<ul> |
|
|
434 |
{{#bands}} |
|
|
435 |
<li>{{.}}</li> |
|
|
436 |
{{/bands}} |
|
|
437 |
</ul></pre> |
|
|
438 |
|
|
|
439 |
|
|
|
440 |
<h5 id="with">with</h5> |
|
|
441 |
|
|
|
442 |
<p> |
|
|
443 |
The <code>with</code> block helper renders the given block in a different context. This can save you some typing in a template that will render a lot of namespaced data. |
|
|
444 |
</p> |
|
|
445 |
|
|
|
446 |
<table class="handlebars-code"> |
|
|
447 |
<thead> |
|
|
448 |
<tr> |
|
|
449 |
<th>Template Source</th> |
|
|
450 |
<th>Data</th> |
|
|
451 |
<th>Output</th> |
|
|
452 |
</tr> |
|
|
453 |
</thead> |
|
|
454 |
|
|
|
455 |
<tbody> |
|
|
456 |
<tr> |
|
|
457 |
<td width="33%"> |
|
|
458 |
<pre class="code prettyprint lang-handlebars"><p class="author"> |
|
|
459 |
{{#with author}} |
|
|
460 |
{{firstName}} {{lastName}} |
|
|
461 |
{{/with}} |
|
|
462 |
</p></pre> |
|
|
463 |
|
|
|
464 |
</td> |
|
|
465 |
|
|
|
466 |
<td width="33%"> |
|
|
467 |
<pre class="code prettyprint">{ |
|
|
468 |
author: { |
|
|
469 |
firstName: 'Ryan', |
|
|
470 |
lastName: 'Grove' |
|
|
471 |
} |
|
|
472 |
}</pre> |
|
|
473 |
|
|
|
474 |
</td> |
|
|
475 |
|
|
|
476 |
<td width="33%"> |
|
|
477 |
<pre class="code prettyprint"><p class="author"> |
|
|
478 |
Ryan Grove |
|
|
479 |
</p></pre> |
|
|
480 |
|
|
|
481 |
</td> |
|
|
482 |
</tr> |
|
|
483 |
</tbody> |
|
|
484 |
</table> |
|
|
485 |
|
|
|
486 |
<p> |
|
|
487 |
If you create an expression with an identifier that points to an object value, Handlebars will automatically use the <code>with</code> helper to render the block in the context of that object, so we could rewrite the template above like this and get the same result: |
|
|
488 |
</p> |
|
|
489 |
|
|
|
490 |
<pre class="code prettyprint lang-handlebars"><p class="author"> |
|
|
491 |
{{#author}} |
|
|
492 |
{{firstName}} {{lastName}} |
|
|
493 |
{{/author}} |
|
|
494 |
</p></pre> |
|
|
495 |
|
|
|
496 |
|
|
|
497 |
<h5 id="if">if</h5> |
|
|
498 |
|
|
|
499 |
<p> |
|
|
500 |
The <code>if</code> block helper accepts a single parameter, which may be either a literal value or a reference to a value. If the value is truthy and not an empty array, the contents of the block will be rendered. If an optional <code>else</code> block is provided, its contents will be rendered if the value is falsy or an empty array. Inside an <code>if</code> or <code>else</code> block, the context remains the same as it was outside the block. |
|
|
501 |
</p> |
|
|
502 |
|
|
|
503 |
<p> |
|
|
504 |
In order to prevent templates from becoming bogged down with logic that should be implemented in JavaScript or in a helper function, the <code>if</code> helper only supports simple true/false logic based on a single value. It doesn't support comparisons or logical operators like <code>&&</code> and <code>||</code>. |
|
|
505 |
</p> |
|
|
506 |
|
|
|
507 |
<table class="handlebars-code"> |
|
|
508 |
<thead> |
|
|
509 |
<tr> |
|
|
510 |
<th>Template Source</th> |
|
|
511 |
<th>Data</th> |
|
|
512 |
<th>Output</th> |
|
|
513 |
</tr> |
|
|
514 |
</thead> |
|
|
515 |
|
|
|
516 |
<tbody> |
|
|
517 |
<tr> |
|
|
518 |
<td width="33%"> |
|
|
519 |
<pre class="code prettyprint lang-handlebars"><h1>Currently online</h1> |
|
|
520 |
|
|
|
521 |
{{#if users}} |
|
|
522 |
<ul> |
|
|
523 |
{{#users}} |
|
|
524 |
<li>{{.}}</li> |
|
|
525 |
{{/users}} |
|
|
526 |
</ul> |
|
|
527 |
{{/if}}</pre> |
|
|
528 |
|
|
|
529 |
</td> |
|
|
530 |
|
|
|
531 |
<td width="33%"> |
|
|
532 |
<pre class="code prettyprint">{ |
|
|
533 |
users: [ |
|
|
534 |
'Ryan Grove', |
|
|
535 |
'Eric Ferraiuolo', |
|
|
536 |
'Lucas Smith', |
|
|
537 |
'Dav Glass' |
|
|
538 |
] |
|
|
539 |
}</pre> |
|
|
540 |
|
|
|
541 |
</td> |
|
|
542 |
|
|
|
543 |
<td width="33%"> |
|
|
544 |
<pre class="code prettyprint"><h1>Currently online</h1> |
|
|
545 |
|
|
|
546 |
<ul> |
|
|
547 |
<li>Ryan Grove</li> |
|
|
548 |
<li>Eric Ferraiuolo</li> |
|
|
549 |
<li>Lucas Smith</li> |
|
|
550 |
<li>Dav Glass</li> |
|
|
551 |
</ul></pre> |
|
|
552 |
|
|
|
553 |
</td> |
|
|
554 |
</tr> |
|
|
555 |
</tbody> |
|
|
556 |
</table> |
|
|
557 |
|
|
|
558 |
<p> |
|
|
559 |
If we empty the <code>users</code> array and re-render the template, the list won't be included in the output. |
|
|
560 |
</p> |
|
|
561 |
|
|
|
562 |
<table class="handlebars-code"> |
|
|
563 |
<thead> |
|
|
564 |
<tr> |
|
|
565 |
<th>Template Source</th> |
|
|
566 |
<th>Data</th> |
|
|
567 |
<th>Output</th> |
|
|
568 |
</tr> |
|
|
569 |
</thead> |
|
|
570 |
|
|
|
571 |
<tbody> |
|
|
572 |
<tr> |
|
|
573 |
<td width="33%"> |
|
|
574 |
<pre class="code prettyprint lang-handlebars"><h1>Currently online</h1> |
|
|
575 |
|
|
|
576 |
{{#if users}} |
|
|
577 |
<ul> |
|
|
578 |
{{#users}} |
|
|
579 |
<li>{{.}}</li> |
|
|
580 |
{{/users}} |
|
|
581 |
</ul> |
|
|
582 |
{{/if}}</pre> |
|
|
583 |
|
|
|
584 |
</td> |
|
|
585 |
|
|
|
586 |
<td width="33%"> |
|
|
587 |
<pre class="code prettyprint">{ |
|
|
588 |
users: [] |
|
|
589 |
}</pre> |
|
|
590 |
|
|
|
591 |
</td> |
|
|
592 |
|
|
|
593 |
<td width="33%"> |
|
|
594 |
<pre class="code prettyprint"><h1>Currently online</h1></pre> |
|
|
595 |
|
|
|
596 |
</td> |
|
|
597 |
</tr> |
|
|
598 |
</tbody> |
|
|
599 |
</table> |
|
|
600 |
|
|
|
601 |
<p> |
|
|
602 |
We can add an <code>else</code> block to display an informative message when no users are online. |
|
|
603 |
</p> |
|
|
604 |
|
|
|
605 |
<table class="handlebars-code"> |
|
|
606 |
<thead> |
|
|
607 |
<tr> |
|
|
608 |
<th>Template Source</th> |
|
|
609 |
<th>Data</th> |
|
|
610 |
<th>Output</th> |
|
|
611 |
</tr> |
|
|
612 |
</thead> |
|
|
613 |
|
|
|
614 |
<tbody> |
|
|
615 |
<tr> |
|
|
616 |
<td width="33%"> |
|
|
617 |
<pre class="code prettyprint lang-handlebars"><h1>Currently online</h1> |
|
|
618 |
|
|
|
619 |
{{#if users}} |
|
|
620 |
<ul> |
|
|
621 |
{{#users}} |
|
|
622 |
<li>{{.}}</li> |
|
|
623 |
{{/users}} |
|
|
624 |
</ul> |
|
|
625 |
{{else}} |
|
|
626 |
<p>Nobody's here!</p> |
|
|
627 |
{{/if}}</pre> |
|
|
628 |
|
|
|
629 |
</td> |
|
|
630 |
|
|
|
631 |
<td width="33%"> |
|
|
632 |
<pre class="code prettyprint">{ |
|
|
633 |
users: [] |
|
|
634 |
}</pre> |
|
|
635 |
|
|
|
636 |
</td> |
|
|
637 |
|
|
|
638 |
<td width="33%"> |
|
|
639 |
<pre class="code prettyprint"><h1>Currently online</h1> |
|
|
640 |
|
|
|
641 |
<p>Nobody's here!</p></pre> |
|
|
642 |
|
|
|
643 |
</td> |
|
|
644 |
</tr> |
|
|
645 |
</tbody> |
|
|
646 |
</table> |
|
|
647 |
|
|
|
648 |
<h5 id="unless">unless</h5> |
|
|
649 |
|
|
|
650 |
<p> |
|
|
651 |
The <code>unless</code> block helper does exactly the opposite of the <code>if</code> helper: it renders the contents of the block if the provided value is falsy or an empty array. |
|
|
652 |
</p> |
|
|
653 |
|
|
|
654 |
<table class="handlebars-code"> |
|
|
655 |
<thead> |
|
|
656 |
<tr> |
|
|
657 |
<th>Template Source</th> |
|
|
658 |
<th>Data</th> |
|
|
659 |
<th>Output</th> |
|
|
660 |
</tr> |
|
|
661 |
</thead> |
|
|
662 |
|
|
|
663 |
<tbody> |
|
|
664 |
<tr> |
|
|
665 |
<td width="33%"> |
|
|
666 |
<pre class="code prettyprint lang-handlebars"><h1>Currently online</h1> |
|
|
667 |
|
|
|
668 |
{{#unless users}} |
|
|
669 |
<p>Nobody's here!</p> |
|
|
670 |
{{else}} |
|
|
671 |
<ul> |
|
|
672 |
{{#users}} |
|
|
673 |
<li>{{.}}</li> |
|
|
674 |
{{/users}} |
|
|
675 |
</ul> |
|
|
676 |
{{/unless}}</pre> |
|
|
677 |
|
|
|
678 |
</td> |
|
|
679 |
|
|
|
680 |
<td width="33%"> |
|
|
681 |
<pre class="code prettyprint">{ |
|
|
682 |
users: [ |
|
|
683 |
'Ryan Grove', |
|
|
684 |
'Eric Ferraiuolo', |
|
|
685 |
'Lucas Smith', |
|
|
686 |
'Dav Glass' |
|
|
687 |
] |
|
|
688 |
}</pre> |
|
|
689 |
|
|
|
690 |
</td> |
|
|
691 |
|
|
|
692 |
<td width="33%"> |
|
|
693 |
<pre class="code prettyprint"><h1>Currently online</h1> |
|
|
694 |
|
|
|
695 |
<ul> |
|
|
696 |
<li>Ryan Grove</li> |
|
|
697 |
<li>Eric Ferraiuolo</li> |
|
|
698 |
<li>Lucas Smith</li> |
|
|
699 |
<li>Dav Glass</li> |
|
|
700 |
</ul></pre> |
|
|
701 |
|
|
|
702 |
</td> |
|
|
703 |
</tr> |
|
|
704 |
</tbody> |
|
|
705 |
</table> |
|
|
706 |
|
|
|
707 |
<h4 id="comment-expressions">Comment Expressions</h4> |
|
|
708 |
|
|
|
709 |
<p> |
|
|
710 |
An expression beginning with <code>{{!</code> is treated as a comment and won't show up in the rendered output. |
|
|
711 |
</p> |
|
|
712 |
|
|
|
713 |
<pre class="code prettyprint lang-handlebars">{{! I'm a Handlebars comment! I won't show up in rendered output. }} |
|
|
714 |
<!-- I'm an HTML comment! I will show up in rendered output. --></pre> |
|
|
715 |
|
|
|
716 |
|
|
|
717 |
<p> |
|
|
718 |
Multi-line comments work too. |
|
|
719 |
</p> |
|
|
720 |
|
|
|
721 |
<pre class="code prettyprint lang-handlebars">{{! |
|
|
722 |
I'm a multi-line comment! |
|
|
723 |
}}</pre> |
|
|
724 |
|
|
|
725 |
|
|
|
726 |
<p> |
|
|
727 |
Unfortunately, Handlebars doesn't ignore expressions inside comments, so you can't actually comment out an expression. |
|
|
728 |
</p> |
|
|
729 |
|
|
|
730 |
<pre class="code prettyprint lang-handlebars"><!-- This won't work (it'll leave a trailing "}}" behind) --> |
|
|
731 |
{{! {{expression}} }}</pre> |
|
|
732 |
|
|
|
733 |
|
|
|
734 |
<h4 id="partial-expressions">Partial Expressions</h4> |
|
|
735 |
|
|
|
736 |
<p> |
|
|
737 |
An expression like <code>{{> partialName}}</code> will render the named partial template at that position in the output, inheriting the current data context. A partial is a reusable template that's registered using the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_registerPartial"><code>registerPartial()</code></a> method. |
|
|
738 |
</p> |
|
|
739 |
|
|
|
740 |
<p> |
|
|
741 |
See the <a href="#partials">Partials</a> section of this guide for more details on creating and using partials. |
|
|
742 |
</p> |
|
|
743 |
|
|
|
744 |
<h3 id="helper-functions">Helper Functions</h3> |
|
|
745 |
|
|
|
746 |
<p> |
|
|
747 |
Helper functions (often referred to simply as "helpers") are functions that are registered with the Handlebars runtime using the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_registerHelper"><code>registerHelper()</code></a> method and can then be called from within a template at render-time. Helper functions can transform text, iterate over arbitrary data, implement branching logic, and more. |
|
|
748 |
</p> |
|
|
749 |
|
|
|
750 |
<p> |
|
|
751 |
A helper function can accept parameters and even entire blocks of template content. Here's how you might call a simple inline helper to render an HTML link, passing in the link text and URL: |
|
|
752 |
</p> |
|
|
753 |
|
|
|
754 |
<pre class="code prettyprint lang-handlebars">{{link "Handlebars docs" "http://handlebarsjs.com"}}</pre> |
|
|
755 |
|
|
|
756 |
|
|
|
757 |
<p> |
|
|
758 |
Block helpers have a slightly different syntax, using an opening and closing tag to delimit an entire block of template content. The helper name is specified in the opening and closing tags of the block: |
|
|
759 |
</p> |
|
|
760 |
|
|
|
761 |
<pre class="code prettyprint lang-handlebars">{{#list contents}} |
|
|
762 |
{{link text url}} |
|
|
763 |
{{/list}}</pre> |
|
|
764 |
|
|
|
765 |
|
|
|
766 |
<p> |
|
|
767 |
Many of Handlebars' own features are implemented as <a href="#built-in-block-helpers">Built-in Block Helpers</a>. |
|
|
768 |
</p> |
|
|
769 |
|
|
|
770 |
<p> |
|
|
771 |
Helper functions are executed when a template is rendered, not when it's compiled. This allows helper functions to take advantage of the state of the rendering environment (since a template may have been pre-compiled somewhere else), and to return different content even when the same template is rendered multiple times. |
|
|
772 |
</p> |
|
|
773 |
|
|
|
774 |
<h4 id="defining-custom-helpers">Defining Custom Helpers</h4> |
|
|
775 |
|
|
|
776 |
<p> |
|
|
777 |
To define a custom helper function, call the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_registerHelper"><code>registerHelper()</code></a> method and provide a name and a function to execute when the helper is called. The function may accept any number of arguments from the template, which may be provided either as literal values or as references to data properties. The final argument passed to the function will always be an <code>options</code> object (more on this <a href="#hash-arguments">later</a>). |
|
|
778 |
</p> |
|
|
779 |
|
|
|
780 |
<h5 id="basic-helpers">Basic Helpers</h5> |
|
|
781 |
|
|
|
782 |
<p> |
|
|
783 |
Here's a simple helper that takes two parameters and spits out an HTML link. |
|
|
784 |
</p> |
|
|
785 |
|
|
|
786 |
<pre class="code prettyprint">// Register a {{{link}}} helper for creating HTML links. |
|
|
787 |
Y.Handlebars.registerHelper('link', function (text, url) { |
|
|
788 |
return '<a href="' + url + '">' + text + '</a>'; |
|
|
789 |
});</pre> |
|
|
790 |
|
|
|
791 |
|
|
|
792 |
<p> |
|
|
793 |
We can use this helper to render the following template: |
|
|
794 |
</p> |
|
|
795 |
|
|
|
796 |
<p style="margin-bottom: -1em;"> |
|
|
797 |
<strong>Template Source</strong> |
|
|
798 |
</p> |
|
|
799 |
|
|
|
800 |
<pre class="code prettyprint lang-handlebars"><ul> |
|
|
801 |
<li>{{{link "Pie" "http://pieisgood.org/"}}}</li> |
|
|
802 |
<li>{{{link kittens.text kittens.url}}}</li> |
|
|
803 |
</ul></pre> |
|
|
804 |
|
|
|
805 |
|
|
|
806 |
<p style="margin-bottom: -1em;"> |
|
|
807 |
<strong>Data</strong> |
|
|
808 |
</p> |
|
|
809 |
|
|
|
810 |
<pre class="code prettyprint">{ |
|
|
811 |
kittens: { |
|
|
812 |
text: "Kittens", |
|
|
813 |
url : "http://www.flickr.com/search/?q=kittens" |
|
|
814 |
} |
|
|
815 |
}</pre> |
|
|
816 |
|
|
|
817 |
|
|
|
818 |
<p style="margin-bottom: -1em;"> |
|
|
819 |
<strong>Output</strong> |
|
|
820 |
</p> |
|
|
821 |
|
|
|
822 |
<pre class="code prettyprint"><ul> |
|
|
823 |
<li><a href="http://pieisgood.org/">Pie</a></li> |
|
|
824 |
<li><a href="http://www.flickr.com/search/?q=kittens">Kittens</a></li> |
|
|
825 |
</ul></pre> |
|
|
826 |
|
|
|
827 |
|
|
|
828 |
<p> |
|
|
829 |
Notice the use of the triple-mustache for the <code>{{{link}}}</code> expressions? That was necessary in order to prevent the helper's return value from being HTML-escaped. As an alternative to using a triple-mustache, we could modify the helper to return an instance of <code>Y.Handlebars.SafeString</code>, which will bypass HTML escaping even when used with a double-mustache expression. |
|
|
830 |
</p> |
|
|
831 |
|
|
|
832 |
<pre class="code prettyprint">// Register a {{link}} helper for creating HTML links. The return value of this |
|
|
833 |
// helper will never be automatically HTML-escaped, so the helper does its own |
|
|
834 |
// internal escaping. |
|
|
835 |
Y.Handlebars.registerHelper('link', function (text, url) { |
|
|
836 |
text = Y.Escape.html(text); |
|
|
837 |
url = Y.Escape.html(url); |
|
|
838 |
|
|
|
839 |
return new Y.Handlebars.SafeString('<a href="' + url + '">' + text + '</a>'); |
|
|
840 |
});</pre> |
|
|
841 |
|
|
|
842 |
|
|
|
843 |
<p> |
|
|
844 |
Now we can simply use <code>{{link "Text" "http://example.com/"}}</code> to call the helper, and we don't need to worry about escaping in the template itself since we know the helper will take care of it. |
|
|
845 |
</p> |
|
|
846 |
|
|
|
847 |
<h5 id="hash-arguments">Hash Arguments</h5> |
|
|
848 |
|
|
|
849 |
<p> |
|
|
850 |
In the example above, we created a helper that accepts two unnamed arguments. Unnamed arguments work fine for simple helpers, but you can also choose to supply a helper function with a hash of named parameters. This may be more intuitive if your helper accepts a lot of options. |
|
|
851 |
</p> |
|
|
852 |
|
|
|
853 |
<p> |
|
|
854 |
The final argument passed to a helper function is always a special <code>options</code> object. The <code>options.hash</code> property is an object hash that contains any named parameters that were passed from the template. |
|
|
855 |
</p> |
|
|
856 |
|
|
|
857 |
<pre class="code prettyprint">// Register a {{link}} helper that accepts a hash of named parameters instead |
|
|
858 |
// of individual arguments. |
|
|
859 |
Y.Handlebars.registerHelper('link', function (options) { |
|
|
860 |
var text = Y.Escape.html(options.hash.text), |
|
|
861 |
url = Y.Escape.html(options.hash.url); |
|
|
862 |
|
|
|
863 |
return new Y.Handlebars.SafeString('<a href="' + url + '">' + text + '</a>'); |
|
|
864 |
});</pre> |
|
|
865 |
|
|
|
866 |
|
|
|
867 |
<p> |
|
|
868 |
In the template, pass hash arguments as key/value pairs delimited by <code>=</code> and separated by a space. Keys must be simple identifiers. Values may be literal values (strings, bools, integers) or references to data properties. |
|
|
869 |
</p> |
|
|
870 |
|
|
|
871 |
<pre class="code prettyprint lang-handlebars"><ul> |
|
|
872 |
<li>{{link text="Pie" url="http://pieisgood.org/"}}</li> |
|
|
873 |
<li>{{link text=kittens.text url=kittens.url}}</li> |
|
|
874 |
</ul></pre> |
|
|
875 |
|
|
|
876 |
|
|
|
877 |
<p> |
|
|
878 |
A helper function can even accept a combination of standard arguments and hash arguments. |
|
|
879 |
</p> |
|
|
880 |
|
|
|
881 |
<pre class="code prettyprint">// Register a {{link}} helper that accepts a combination of standard args and |
|
|
882 |
// hash arguments. |
|
|
883 |
Y.Handlebars.registerHelper('link', function (text, options) { |
|
|
884 |
var url = Y.Escape.html(options.hash.url); |
|
|
885 |
|
|
|
886 |
text = Y.Escape.html(text); |
|
|
887 |
|
|
|
888 |
return new Y.Handlebars.SafeString('<a href="' + url + '">' + text + '</a>'); |
|
|
889 |
});</pre> |
|
|
890 |
|
|
|
891 |
|
|
|
892 |
<pre class="code prettyprint lang-handlebars"><ul> |
|
|
893 |
<li>{{link "Pie" url="http://pieisgood.org/"}}</li> |
|
|
894 |
<li>{{link kittens.text url=kittens.url}}</li> |
|
|
895 |
</ul></pre> |
|
|
896 |
|
|
|
897 |
|
|
|
898 |
<h5 id="block-helpers">Block Helpers</h5> |
|
|
899 |
|
|
|
900 |
<p> |
|
|
901 |
A block helper works similarly to a basic helper, with a couple of differences: |
|
|
902 |
</p> |
|
|
903 |
|
|
|
904 |
<ul> |
|
|
905 |
<li> |
|
|
906 |
<p> |
|
|
907 |
The <code>options</code> object passed to a block helper function contains an <code>fn</code> property, which is a function that accepts a context as an argument and returns a string containing the rendered contents of the block. |
|
|
908 |
</p> |
|
|
909 |
</li> |
|
|
910 |
|
|
|
911 |
<li> |
|
|
912 |
<p> |
|
|
913 |
The <code>options</code> object passed to a block helper function also contains an <code>inverse</code> property. This is a function that accepts a context just like the <code>fn</code> property, except that it renders the block following an <code>else</code> statement. If there isn't an <code>else</code> statement, the <code>inverse</code> function will be a noop. |
|
|
914 |
</p> |
|
|
915 |
</li> |
|
|
916 |
|
|
|
917 |
<li> |
|
|
918 |
<p> |
|
|
919 |
The return value of a block helper is not automatically HTML-escaped, but the return value of <code>options.fn()</code> <em>is</em> automatically escaped. This ensures that block helpers don't return double-escaped content. |
|
|
920 |
</p> |
|
|
921 |
</li> |
|
|
922 |
</ul> |
|
|
923 |
|
|
|
924 |
<p> |
|
|
925 |
Here's a simple block helper that wraps its contents in a <code><p></code> element: |
|
|
926 |
</p> |
|
|
927 |
|
|
|
928 |
<pre class="code prettyprint">Y.Handlebars.registerHelper('gamera', function (options) { |
|
|
929 |
return '<p class="' + this.animal + '">' + options.fn(this) + '</p>'; |
|
|
930 |
});</pre> |
|
|
931 |
|
|
|
932 |
|
|
|
933 |
<table class="handlebars-code"> |
|
|
934 |
<thead> |
|
|
935 |
<tr> |
|
|
936 |
<th>Template Source</th> |
|
|
937 |
<th>Data</th> |
|
|
938 |
<th>Output</th> |
|
|
939 |
</tr> |
|
|
940 |
</thead> |
|
|
941 |
|
|
|
942 |
<tbody> |
|
|
943 |
<tr> |
|
|
944 |
<td width="33%"> |
|
|
945 |
<pre class="code prettyprint lang-handlebars"><p>Gamera is really neat!</p> |
|
|
946 |
|
|
|
947 |
{{#gamera}} |
|
|
948 |
He is made of {{animal}} meat! |
|
|
949 |
{{/gamera}}</pre> |
|
|
950 |
|
|
|
951 |
</td> |
|
|
952 |
|
|
|
953 |
<td width="33%"> |
|
|
954 |
<pre class="code prettyprint">{ |
|
|
955 |
animal: 'turtle' |
|
|
956 |
}</pre> |
|
|
957 |
|
|
|
958 |
</td> |
|
|
959 |
|
|
|
960 |
<td width="33%"> |
|
|
961 |
<pre class="code prettyprint"><p>Gamera is a really neat!</p> |
|
|
962 |
|
|
|
963 |
<p class="turtle"> |
|
|
964 |
He is made of turtle meat! |
|
|
965 |
</p></pre> |
|
|
966 |
|
|
|
967 |
</td> |
|
|
968 |
</tr> |
|
|
969 |
</tbody> |
|
|
970 |
</table> |
|
|
971 |
|
|
|
972 |
<p> |
|
|
973 |
Here's how Handlebars implements its own <a href="#if"><code>if</code></a> block helper. The <code>options.inverse()</code> function makes it possible to render the contents of an <code>else</code> block if one is provided. |
|
|
974 |
</p> |
|
|
975 |
|
|
|
976 |
<pre class="code prettyprint">Y.Handlebars.registerHelper('if', function (condition, options) { |
|
|
977 |
if (condition) { |
|
|
978 |
return options.fn(this); |
|
|
979 |
} else { |
|
|
980 |
return options.inverse(this); |
|
|
981 |
} |
|
|
982 |
});</pre> |
|
|
983 |
|
|
|
984 |
|
|
|
985 |
<h3 id="partials">Partials</h3> |
|
|
986 |
|
|
|
987 |
<p> |
|
|
988 |
A partial is like a mini-template that can be called from a larger template. Partials are often used to render frequently-used chunks of content, such as a header, footer, or a common view of some data. |
|
|
989 |
</p> |
|
|
990 |
|
|
|
991 |
<p> |
|
|
992 |
Partials are registered with Handlebars through the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_registerPartial"><code>registerPartial()</code></a> method. Once registered, a partial can be referenced from a template using an expression like <code>{{> partialName }}</code>. Partials may be registered as string templates or as compiled template functions. |
|
|
993 |
</p> |
|
|
994 |
|
|
|
995 |
<p> |
|
|
996 |
A partial will inherit the current context of the position at which it's included. |
|
|
997 |
</p> |
|
|
998 |
|
|
|
999 |
<pre class="code prettyprint">// Register a couple of reusable partials. |
|
|
1000 |
Y.Handlebars.registerPartial('header', '<h1>{{title}}</h1>'); |
|
|
1001 |
Y.Handlebars.registerPartial('footer', '<p>Copyright (c) 2012 by Me.</p>');</pre> |
|
|
1002 |
|
|
|
1003 |
|
|
|
1004 |
<table class="handlebars-code"> |
|
|
1005 |
<thead> |
|
|
1006 |
<tr> |
|
|
1007 |
<th>Template Source</th> |
|
|
1008 |
<th>Data</th> |
|
|
1009 |
<th>Output</th> |
|
|
1010 |
</tr> |
|
|
1011 |
</thead> |
|
|
1012 |
|
|
|
1013 |
<tbody> |
|
|
1014 |
<tr> |
|
|
1015 |
<td width="33%"> |
|
|
1016 |
<pre class="code prettyprint lang-handlebars"><div> |
|
|
1017 |
{{> header}} |
|
|
1018 |
|
|
|
1019 |
<p>Mustaches are awesome!</p> |
|
|
1020 |
|
|
|
1021 |
{{> footer}} |
|
|
1022 |
</div></pre> |
|
|
1023 |
|
|
|
1024 |
</td> |
|
|
1025 |
|
|
|
1026 |
<td width="33%"> |
|
|
1027 |
<pre class="code prettyprint">{ |
|
|
1028 |
title: 'My Page About Mustaches' |
|
|
1029 |
}</pre> |
|
|
1030 |
|
|
|
1031 |
</td> |
|
|
1032 |
|
|
|
1033 |
<td width="33%"> |
|
|
1034 |
<pre class="code prettyprint"><div> |
|
|
1035 |
<h1>My Page About Mustaches</h1> |
|
|
1036 |
|
|
|
1037 |
<p>Mustaches are awesome!</p> |
|
|
1038 |
|
|
|
1039 |
<p>Copyright (c) 2012 by Me.</p> |
|
|
1040 |
</div></pre> |
|
|
1041 |
|
|
|
1042 |
</td> |
|
|
1043 |
</tr> |
|
|
1044 |
</tbody> |
|
|
1045 |
</table> |
|
|
1046 |
|
|
|
1047 |
<h3 id="compiling-and-rendering-templates">Compiling and Rendering Templates</h3> |
|
|
1048 |
|
|
|
1049 |
<p> |
|
|
1050 |
Handlebars templates must be compiled before they can be rendered. One benefit of this is that a template only needs to be compiled once, and it can then be rendered multiple times without being recompiled. Templates can even be <a href="#precompiling-templates">precompiled</a> on the server or on the command line and then rendered on the client for optimal performance. |
|
|
1051 |
</p> |
|
|
1052 |
|
|
|
1053 |
<p> |
|
|
1054 |
To compile a template string, pass it to the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_compile"><code>Y.Handlebars.compile()</code></a> method. You'll get back a function. |
|
|
1055 |
</p> |
|
|
1056 |
|
|
|
1057 |
<pre class="code prettyprint">// Compile a template into a reusable function. |
|
|
1058 |
var template = Y.Handlebars.compile('My favorite food is {{food}}.');</pre> |
|
|
1059 |
|
|
|
1060 |
|
|
|
1061 |
<p> |
|
|
1062 |
When you're ready to render the template, execute the function and pass in some data. You'll get back a rendered string. |
|
|
1063 |
</p> |
|
|
1064 |
|
|
|
1065 |
<pre class="code prettyprint">// Render a previously compiled template. |
|
|
1066 |
var output = template({food: 'pie'}); |
|
|
1067 |
// => "My favorite food is pie.";</pre> |
|
|
1068 |
|
|
|
1069 |
|
|
|
1070 |
<p> |
|
|
1071 |
You can re-render the template at any time just by calling the function again. You can even pass in completely different data. |
|
|
1072 |
</p> |
|
|
1073 |
|
|
|
1074 |
<pre class="code prettyprint">// Re-render a previously compiled template. |
|
|
1075 |
output = template({food: 'cheesecake'}); |
|
|
1076 |
// => "My favorite food is cheesecake."</pre> |
|
|
1077 |
|
|
|
1078 |
|
|
|
1079 |
<p> |
|
|
1080 |
If you don't plan to use a template more than once, you can compile and render it in a single step with <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_render"><code>Y.Handlebars.render()</code></a>. |
|
|
1081 |
</p> |
|
|
1082 |
|
|
|
1083 |
<pre class="code prettyprint">// Compile and render a template in a single step. |
|
|
1084 |
output = Y.Handlebars.render('My favorite food is {{food}}.', {food: 'pie'}); |
|
|
1085 |
// => "My favorite food is pie."</pre> |
|
|
1086 |
|
|
|
1087 |
|
|
|
1088 |
<h3 id="precompiling-templates">Precompiling Templates</h3> |
|
|
1089 |
|
|
|
1090 |
<p> |
|
|
1091 |
Since Handlebars templates can be compiled and rendered in separate steps, it's possible to precompile a template for use later. You can precompile a template into raw JavaScript on the server or even on the command line, serve this precompiled JavaScript template to the client, and then render it on the client using any data the client has at its disposal. |
|
|
1092 |
</p> |
|
|
1093 |
|
|
|
1094 |
<p> |
|
|
1095 |
The main benefit of precompilation is performance. Not only does the client not need to go through the compile step, you don't even have to load the Handlebars compiler on the client! All the client needs in order to render a precompiled template is a very small (about 1KB minified and gzipped) piece of JavaScript provided by the <code>handlebars-base</code> module. |
|
|
1096 |
</p> |
|
|
1097 |
|
|
|
1098 |
<h5 id="on-the-server">On the Server</h5> |
|
|
1099 |
|
|
|
1100 |
<p> |
|
|
1101 |
To precompile Handlebars templates on the server using <a href="http://nodejs.org/">Node.js</a>, first install the YUI <a href="http://npmjs.org/">npm</a> module by running the following in a terminal from the directory that contains your server application (this assumes you already have Node and npm installed): |
|
|
1102 |
</p> |
|
|
1103 |
|
|
|
1104 |
<pre class="code terminal"><span class="noselect">$ </span>npm install yui</pre> |
|
|
1105 |
|
|
|
1106 |
|
|
|
1107 |
<p> |
|
|
1108 |
This will install the <code>yui</code> npm module in the current directory and make it available to your application. |
|
|
1109 |
</p> |
|
|
1110 |
|
|
|
1111 |
<p> |
|
|
1112 |
Next, in your application code, call the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_precompile"><code>precompile()</code></a> method to precompile a Handlebars template. It will return a string containing JavaScript code. |
|
|
1113 |
</p> |
|
|
1114 |
|
|
|
1115 |
<pre class="code prettyprint">// Load the YUI Handlebars module. |
|
|
1116 |
var Handlebars = require('yui/handlebars').Handlebars; |
|
|
1117 |
|
|
|
1118 |
// Precompile a template string (pass any string you like here). |
|
|
1119 |
var precompiled = Handlebars.precompile('My favorite food is {{food}}.');</pre> |
|
|
1120 |
|
|
|
1121 |
|
|
|
1122 |
<p> |
|
|
1123 |
The <code>precompiled</code> variable will contain a string of JavaScript code that looks something like this: |
|
|
1124 |
</p> |
|
|
1125 |
|
|
|
1126 |
<pre class="code prettyprint">function (Handlebars,depth0,helpers,partials,data) {\n helpers = helpers || Handlebars.helpers; data = data || {};\n var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;\n\n\n buffer += "My favorite food is ";\n foundHelper = helpers.food;\n if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{},data:data}); }\n else { stack1 = depth0.food; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }\n buffer += escapeExpression(stack1) + ".";\n return buffer;}</pre> |
|
|
1127 |
|
|
|
1128 |
|
|
|
1129 |
<p> |
|
|
1130 |
The <code>precompile()</code> method differs from the <code>compile()</code> method in a couple of important ways: |
|
|
1131 |
</p> |
|
|
1132 |
|
|
|
1133 |
<ul> |
|
|
1134 |
<li><p>The <code>precompile()</code> method returns a string of JavaScript code that's meant to be parsed and executed later, whereas <code>compile()</code> returns a live JavaScript function.</p></li> |
|
|
1135 |
|
|
|
1136 |
<li><p>The code returned by the <code>precompile()</code> method contains no references to any outside objects. Once it's evaluated, the resulting precompiled function must be passed to the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_template"><code>Y.Handlebars.template()</code></a> method, which will "revive" it and make the functionality of the current page's Handlebars class available to it.</p></li> |
|
|
1137 |
</ul> |
|
|
1138 |
|
|
|
1139 |
<p> |
|
|
1140 |
You can now serve this precompiled JS to the client in whatever way makes the most sense for your application. On the client, load the <code>handlebars-base</code> YUI module and pass the precompiled template to the <a href="http://yuilibrary.com/yui/docs/api/classes/Handlebars.html#method_template"><code>Y.Handlebars.template()</code></a> method to convert it into a renderable template function. |
|
|
1141 |
</p> |
|
|
1142 |
|
|
|
1143 |
<p> |
|
|
1144 |
Here's a simple <a href="http://expressjs.com/">Express</a> app that precompiles a template on the server and renders it on the client: |
|
|
1145 |
</p> |
|
|
1146 |
|
|
|
1147 |
<pre class="code prettyprint">#!/usr/bin/env node |
|
|
1148 |
var Handlebars = require('yui/handlebars').Handlebars, |
|
|
1149 |
app = require('express').createServer(), |
|
|
1150 |
|
|
|
1151 |
precompiled = Handlebars.precompile('My favorite food is {{food}}.'); |
|
|
1152 |
|
|
|
1153 |
app.get('/', function (req, res) { |
|
|
1154 |
res.send( |
|
|
1155 |
'<html><body>' + |
|
|
1156 |
'<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>' + |
|
|
1157 |
'<script>' + |
|
|
1158 |
'YUI().use("handlebars-base", "node", function (Y) {' + |
|
|
1159 |
'var template = Y.Handlebars.template(' + precompiled + ');' + |
|
|
1160 |
'Y.one("body").append(template({food: "pie"}));' + |
|
|
1161 |
'});' + |
|
|
1162 |
'</script>' + |
|
|
1163 |
'</body></html>' |
|
|
1164 |
); |
|
|
1165 |
}); |
|
|
1166 |
|
|
|
1167 |
app.listen(7000);</pre> |
|
|
1168 |
|
|
|
1169 |
|
|
|
1170 |
<p> |
|
|
1171 |
To see this simple server in action, save it to a file, install Express and YUI by running <code>npm i express yui</code>, then execute the file with Node.js and browse to <a href="http://localhost:7000/" target="_blank">http://localhost:7000/</a>. |
|
|
1172 |
</p> |
|
|
1173 |
|
|
|
1174 |
<h5 id="on-the-command-line">On the Command Line</h5> |
|
|
1175 |
|
|
|
1176 |
<p> |
|
|
1177 |
The original Handlebars project provides a Node.js-based Handlebars command-line application that can be installed via npm and used to precompile Handlebars template files. Since the precompiled templates produced by the original Handlebars are compatible with YUI Handlebars, this is a great way to precompile your Handlebars templates manually or as part of a build process. |
|
|
1178 |
</p> |
|
|
1179 |
|
|
|
1180 |
<p> |
|
|
1181 |
First, you'll need to install <a href="http://nodejs.org/">Node.js</a> and <a href="http://npmjs.org/">npm</a> if you haven't already. See their respective websites for instructions. |
|
|
1182 |
</p> |
|
|
1183 |
|
|
|
1184 |
<p> |
|
|
1185 |
Next, install the Handlebars npm module. Note that this program is maintained by the maintainers of the <a href="https://github.com/wycats/handlebars.js">original Handlebars project</a>, so there's a chance it could change or break compatibility with YUI Handlebars without notice. |
|
|
1186 |
</p> |
|
|
1187 |
|
|
|
1188 |
<pre class="code terminal"><span class="noselect">$ </span>npm install -g handlebars</pre> |
|
|
1189 |
|
|
|
1190 |
|
|
|
1191 |
<p> |
|
|
1192 |
Now you can run the <code>handlebars</code> executable to precompile a template into JavaScript code. |
|
|
1193 |
</p> |
|
|
1194 |
|
|
|
1195 |
<pre class="code terminal"><span class="noselect">$ </span>handlebars my-template.handlebars -f precompiled-template.js</pre> |
|
|
1196 |
|
|
|
1197 |
|
|
|
1198 |
<p> |
|
|
1199 |
This will compile a template to a JavaScript file which you can load on your page. You could render it like this: |
|
|
1200 |
</p> |
|
|
1201 |
|
|
|
1202 |
<pre class="code prettyprint"><!DOCTYPE html> |
|
|
1203 |
<meta charset="utf-8"> |
|
|
1204 |
<title>My Favorite Food</title> |
|
|
1205 |
|
|
|
1206 |
<body> |
|
|
1207 |
<div id="content"></div> |
|
|
1208 |
|
|
|
1209 |
<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script> |
|
|
1210 |
<script> |
|
|
1211 |
YUI().use('handlebars-base', 'get', 'node', function (Y) { |
|
|
1212 |
// Create a global Handlebars variable that points to Y.Handlebars. This is |
|
|
1213 |
// necessary for compatibility with precompiled templates generated by the |
|
|
1214 |
// original Handlebars project. |
|
|
1215 |
window.Handlebars = Y.Handlebars; |
|
|
1216 |
|
|
|
1217 |
// Load the precompiled template JS onto the page. |
|
|
1218 |
Y.Get.js('precompiled-template.js', function (err) { |
|
|
1219 |
if (err) { |
|
|
1220 |
Y.error('Template failed to load: ' + err); |
|
|
1221 |
return; |
|
|
1222 |
} |
|
|
1223 |
|
|
|
1224 |
// Render the template and insert its output into the page. |
|
|
1225 |
var output = Y.Handlebars.templates['my-template']({food: 'pie'}); |
|
|
1226 |
Y.one('#content').append(output); |
|
|
1227 |
}); |
|
|
1228 |
}); |
|
|
1229 |
</script> |
|
|
1230 |
</body></pre> |
|
|
1231 |
|
|
|
1232 |
|
|
|
1233 |
<h2 id="differences-from-original-handlebars">Differences From Original Handlebars</h2> |
|
|
1234 |
|
|
|
1235 |
<p> |
|
|
1236 |
The YUI Handlebars component is mostly just a YUI wrapper around the <a href="https://github.com/wycats/handlebars.js">original Handlebars code</a>. It's kept closely in sync with the latest code from the upstream Handlebars project, and our intent is to ensure that YUI Handlebars and original Handlebars can be used interchangeably to render the same templates. To see what upstream Handlebars version YUI uses, inspect <code>Y.Handlebars.VERSION</code>. |
|
|
1237 |
</p> |
|
|
1238 |
|
|
|
1239 |
<p> |
|
|
1240 |
YUI Handlebars differs from the original Handlebars in the following minor ways: |
|
|
1241 |
</p> |
|
|
1242 |
|
|
|
1243 |
<ul> |
|
|
1244 |
<li> |
|
|
1245 |
<p> |
|
|
1246 |
YUI Handlebars is a first-class YUI module intended to be loaded via <code>YUI().use()</code> or as a dependency of a module created via <code>YUI.add()</code>. Like all YUI modules, it adds its API to the <code>Y</code> namespace, so the YUI Handlebars object is <code>Y.Handlebars</code> instead of the global <code>Handlebars</code> namespace used by the original Handlebars. |
|
|
1247 |
</p> |
|
|
1248 |
</li> |
|
|
1249 |
|
|
|
1250 |
<li> |
|
|
1251 |
<p> |
|
|
1252 |
The <code>Y.Handlebars.log()</code> function and the <code>log</code> helper call <code>Y.log()</code> under the hood. The log implementation in original Handlebars is a noop that's meant to be overridden. |
|
|
1253 |
</p> |
|
|
1254 |
</li> |
|
|
1255 |
|
|
|
1256 |
<li> |
|
|
1257 |
<p> |
|
|
1258 |
YUI Handlebars appends a "-yui" suffix to the <code>Y.Handlebars.VERSION</code> property. |
|
|
1259 |
</p> |
|
|
1260 |
</li> |
|
|
1261 |
</ul> |
|
|
1262 |
</div> |
|
|
1263 |
</div> |
|
|
1264 |
</div> |
|
|
1265 |
|
|
|
1266 |
<div class="yui3-u-1-4"> |
|
|
1267 |
<div class="sidebar"> |
|
|
1268 |
|
|
|
1269 |
<div id="toc" class="sidebox"> |
|
|
1270 |
<div class="hd"> |
|
|
1271 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
1272 |
</div> |
|
|
1273 |
|
|
|
1274 |
<div class="bd"> |
|
|
1275 |
<ul class="toc"> |
|
|
1276 |
<li> |
|
|
1277 |
<a href="#getting-started">Getting Started</a> |
|
|
1278 |
</li> |
|
|
1279 |
<li> |
|
|
1280 |
<a href="#using-handlebars">Using Handlebars</a> |
|
|
1281 |
<ul class="toc"> |
|
|
1282 |
<li> |
|
|
1283 |
<a href="#quick-start">Quick Start</a> |
|
|
1284 |
</li> |
|
|
1285 |
<li> |
|
|
1286 |
<a href="#template-syntax">Template Syntax</a> |
|
|
1287 |
<ul class="toc"> |
|
|
1288 |
<li> |
|
|
1289 |
<a href="#basic-expressions">Basic Expressions</a> |
|
|
1290 |
<ul class="toc"> |
|
|
1291 |
<li> |
|
|
1292 |
<a href="#html-escaping">HTML Escaping</a> |
|
|
1293 |
</li> |
|
|
1294 |
<li> |
|
|
1295 |
<a href="#contexts-paths">Contexts & Paths</a> |
|
|
1296 |
</li> |
|
|
1297 |
</ul> |
|
|
1298 |
</li> |
|
|
1299 |
<li> |
|
|
1300 |
<a href="#block-expressions">Block Expressions</a> |
|
|
1301 |
</li> |
|
|
1302 |
<li> |
|
|
1303 |
<a href="#built-in-block-helpers">Built-in Block Helpers</a> |
|
|
1304 |
<ul class="toc"> |
|
|
1305 |
<li> |
|
|
1306 |
<a href="#each">each</a> |
|
|
1307 |
</li> |
|
|
1308 |
<li> |
|
|
1309 |
<a href="#with">with</a> |
|
|
1310 |
</li> |
|
|
1311 |
<li> |
|
|
1312 |
<a href="#if">if</a> |
|
|
1313 |
</li> |
|
|
1314 |
<li> |
|
|
1315 |
<a href="#unless">unless</a> |
|
|
1316 |
</li> |
|
|
1317 |
</ul> |
|
|
1318 |
</li> |
|
|
1319 |
<li> |
|
|
1320 |
<a href="#comment-expressions">Comment Expressions</a> |
|
|
1321 |
</li> |
|
|
1322 |
<li> |
|
|
1323 |
<a href="#partial-expressions">Partial Expressions</a> |
|
|
1324 |
</li> |
|
|
1325 |
</ul> |
|
|
1326 |
</li> |
|
|
1327 |
<li> |
|
|
1328 |
<a href="#helper-functions">Helper Functions</a> |
|
|
1329 |
<ul class="toc"> |
|
|
1330 |
<li> |
|
|
1331 |
<a href="#defining-custom-helpers">Defining Custom Helpers</a> |
|
|
1332 |
<ul class="toc"> |
|
|
1333 |
<li> |
|
|
1334 |
<a href="#basic-helpers">Basic Helpers</a> |
|
|
1335 |
</li> |
|
|
1336 |
<li> |
|
|
1337 |
<a href="#hash-arguments">Hash Arguments</a> |
|
|
1338 |
</li> |
|
|
1339 |
<li> |
|
|
1340 |
<a href="#block-helpers">Block Helpers</a> |
|
|
1341 |
</li> |
|
|
1342 |
</ul> |
|
|
1343 |
</li> |
|
|
1344 |
</ul> |
|
|
1345 |
</li> |
|
|
1346 |
<li> |
|
|
1347 |
<a href="#partials">Partials</a> |
|
|
1348 |
</li> |
|
|
1349 |
<li> |
|
|
1350 |
<a href="#compiling-and-rendering-templates">Compiling and Rendering Templates</a> |
|
|
1351 |
</li> |
|
|
1352 |
<li> |
|
|
1353 |
<a href="#precompiling-templates">Precompiling Templates</a> |
|
|
1354 |
<ul class="toc"> |
|
|
1355 |
<li> |
|
|
1356 |
<a href="#on-the-server">On the Server</a> |
|
|
1357 |
</li> |
|
|
1358 |
<li> |
|
|
1359 |
<a href="#on-the-command-line">On the Command Line</a> |
|
|
1360 |
</li> |
|
|
1361 |
</ul> |
|
|
1362 |
</li> |
|
|
1363 |
</ul> |
|
|
1364 |
</li> |
|
|
1365 |
<li> |
|
|
1366 |
<a href="#differences-from-original-handlebars">Differences From Original Handlebars</a> |
|
|
1367 |
</li> |
|
|
1368 |
</ul> |
|
|
1369 |
</div> |
|
|
1370 |
</div> |
|
|
1371 |
|
|
|
1372 |
|
|
|
1373 |
|
|
|
1374 |
|
|
|
1375 |
|
|
|
1376 |
</div> |
|
|
1377 |
</div> |
|
|
1378 |
</div> |
|
|
1379 |
</div> |
|
|
1380 |
|
|
|
1381 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
1382 |
<script>prettyPrint();</script> |
|
|
1383 |
|
|
|
1384 |
<script> |
|
|
1385 |
YUI.Env.Tests = { |
|
|
1386 |
examples: [], |
|
|
1387 |
project: '../assets', |
|
|
1388 |
assets: '../assets/handlebars', |
|
|
1389 |
name: 'handlebars', |
|
|
1390 |
title: 'Handlebars', |
|
|
1391 |
newWindow: '', |
|
|
1392 |
auto: false |
|
|
1393 |
}; |
|
|
1394 |
|
|
|
1395 |
</script> |
|
|
1396 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
1397 |
|
|
|
1398 |
|
|
|
1399 |
|
|
|
1400 |
</body> |
|
|
1401 |
</html> |