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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Handlebars 中文网：轻逻辑语义化的模板引擎</title>
<meta charset="UTF-8">
<link href="static/stylesheets/application.css" media="all" rel="stylesheet" type="text/css"/>
<link href="static/stylesheets/sunburst.css" media="all" rel="stylesheet" type="text/css"/>
<link href="static/stylesheets/site.css" media="all" rel="stylesheet" type="text/css"/>
<link href="static/images/favicon.png" rel="shortcut icon" type="image/png" />
</head>
<body>
<div id="body">
<div id="header">
<a href="index.html">
<img alt="Handlebars 中文网：轻逻辑语义化的模板引擎" src="static/images/handlebars_logo.png"/>
</a>
</div>
<div id="contents">
<a href="http://www.devswag.com/collections/handlebars" id="callout">
<img alt="Buy Handlebars swag on DevSwag!" src="static/images/handlebars-devswag.png"/>
</a>
<div id="intro">
<p>你可以使用 Handlebars 轻松的创建语义化模板。<br>Handlebars 兼容 Mustache 模板。你可以在 Handlebars 中直接使用 Mustache 模板。</p>
<p></p></div>
<a class="download" href="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.1.js" target="_blank">Download: 3.0.1</a>
<a class="download-runtime" href="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.runtime-v3.0.1.js" target="_blank">Download: runtime-3.0.1</a><p></p>
<h2>快速入门</h2>
<dic class="contents"><!-- Start .contents-->
<p>Handlebars 模板看起来很像 HTML ，Handlebars 表达式嵌入在 HTML 中。</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>Handlebars 表达式以 <code>{{</code>属性名<code>}}</code> 的方式插入数据。</p>
<p><a href="expressions.html" class="more-info" target="_blank">高级教程：表达式</a></p>
<hr>
<p>你可以在 HTML 中使用 <code><script></code> 标签存放模板</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"entry-template"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/x-handlebars-template"</span>></span><span class="handlebars"><span class="xml">
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<hr>
<p>在 JavaScript 中获取 <code><scrit></code> 中的模板并编译模板</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> source = $(<span class="hljs-string">"#entry-template"</span>).html();
<span class="hljs-keyword">var</span> <span class="hljs-keyword">template</span> = <span class="hljs-type">Handlebars</span>.compile(source);
</code></pre>
<div class="translator">
<p>建议初学者跳过预编译章节
</div></p>
<p>还可以预编译你的模板。预编译后的模板只需使用 <a href="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.runtime-v3.0.0.js" target="_blank">handlebars.runtime.js</a> 渲染，这样可以提高性能并减少文件大小。在移动设备中这样做非常有意义（因为移动设备的性能和网络状态都没有PC好）。</p>
<p><a href="precompilation.html" class="more-info" target="_blank">高级教程：预编译</a></p>
<hr>
<p>传入数据，执行 Handlebars 返回 渲染后的 HTML。</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> source = $(<span class="hljs-string">"#entry-template"</span>).html();
<span class="hljs-keyword">var</span> <span class="hljs-keyword">template</span> = <span class="hljs-type">Handlebars</span>.compile(source);
<span class="hljs-keyword">var</span> context = {title: <span class="hljs-string">"My New Post"</span>, body: <span class="hljs-string">"This is my first post!"</span>};
<span class="hljs-keyword">var</span> html = <span class="hljs-keyword">template</span>(context);
</code></pre>
<p>渲染结果</p>
<pre><code class="lang-html"><<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"entry"</span>>
<h1>My New Post</h1>
<<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"body"</span>>
This <span class="hljs-keyword">is</span> <span class="hljs-keyword">my</span> <span class="hljs-keyword">first</span> post!
</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>>
</code></pre>
<p><a href="demo/execution-1.html" target="_blank">示例</a></p>
<p><a href="execution.html" class="more-info" target="_blank">高级教程: 执行</a></p>
<h2>HTML 转义</h2>
<p>遇到 HTML标签时 Handlebars 会返回转义后的 HTML，如果你不希望被转义，可以使用 <code>{{{</code></p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>
</span><span class="hljs-expression">{{{<span class="hljs-variable">body</span>}}</span><span class="xml">}
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>渲染数据：</p>
<pre><code class="lang-js">{
<span class="hljs-attribute">title</span>: <span class="hljs-string">"All about <p> Tags"</span>,
<span class="hljs-attribute">body</span>: <span class="hljs-string">"<p>This is a post about &lt;p&gt; tags</p>"</span>
}
</code></pre>
<p>渲染结果：</p>
<pre><code class="lang-html"><<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"entry"</span>>
<h1>All About &lt;p&gt; Tags</h1>
<<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"body"</span>>
<p>This <span class="hljs-keyword">is</span> a post <span class="hljs-keyword">about</span> &lt;p&gt; tags</p>
</<span class="hljs-keyword">div</span>>
</<span class="hljs-keyword">div</span>>
</code></pre>
<p><a href="#SafeString" name="SafeString" target="_blank"></a></p>
<p>Handlebars 不会转义 <code>Handlebars.SafeString</code> 。如果你自定义了一个 helper 返回 HTML 代码，你需要返回 <code>new Handlebars.SafeString(result)</code> ，那么你需要手动对内容进行转义</p>
<pre><code class="lang-js"><span class="hljs-type">Handlebars</span>.registerHelper('link', function(text, url) {
text = <span class="hljs-type">Handlebars</span>.<span class="hljs-type">Utils</span>.escapeExpression(text);
url = <span class="hljs-type">Handlebars</span>.<span class="hljs-type">Utils</span>.escapeExpression(url);
<span class="hljs-keyword">var</span> <span class="hljs-literal">result</span> = '<a href=<span class="hljs-string">"' + url + '"</span>>' + text + '</a>';
<span class="hljs-keyword">return</span> new <span class="hljs-type">Handlebars</span>.<span class="hljs-type">SafeString</span>(<span class="hljs-literal">result</span>);
});
</code></pre>
<p><code>new Handlebars.SafeString()</code> 会标识传入参数是“安全的”，所以即使你不使用 <code>{{{</code> 。Handlebars 也不会转义。</p>
<p><a href="demo/SafeString.html" target="_blank">示例</a></p>
<h2>块表达式</h2>
<p>块表达式允许你定义helper，用不同的数据上下文（context）调用一段模板。下面我们定义一个生成列表的helper：</p>
<p>快表达式允许你自定义 helper，使用当前传入参数作为上下文调用模板。</p>
<p>创建一个用于生产列表的快表达式</p>
<pre><code><span class="hljs-collection">{<span class="hljs-collection">{#list people}</span>}</span><span class="hljs-collection">{<span class="hljs-collection">{firstName}</span>}</span> <span class="hljs-collection">{<span class="hljs-collection">{lastName}</span>}</span><span class="hljs-collection">{<span class="hljs-collection">{/list}</span>}</span>
</code></pre><p>渲染数据如下所示：</p>
<pre><code class="lang-js">{
<span class="hljs-label"> people:</span> [
{<span class="hljs-string">firstName:</span> <span class="hljs-string">"Yehuda"</span>, <span class="hljs-string">lastName:</span> <span class="hljs-string">"Katz"</span>},
{<span class="hljs-string">firstName:</span> <span class="hljs-string">"Carl"</span>, <span class="hljs-string">lastName:</span> <span class="hljs-string">"Lerche"</span>},
{<span class="hljs-string">firstName:</span> <span class="hljs-string">"Alan"</span>, <span class="hljs-string">lastName:</span> <span class="hljs-string">"Johnson"</span>}
]
}
</code></pre>
<p>we would create a helper named <code>list</code> to generate our HTML list. The helper receives the <code>people</code> as its first parameter, and an options hash as its second parameter. The options hash contains a property named <code>fn</code>, which you can invoke with a context just as you would invoke a normal Handlebars template.</p>
<pre><code class="lang-js">Handlebars.registerHelper('<span class="hljs-keyword">list</span>', function(items, options) {
<span class="hljs-keyword">var</span> <span class="hljs-keyword">out</span> = <span class="hljs-string">"<ul>"</span>;
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=0, <span class="hljs-keyword">l</span>=items.length; i<<span class="hljs-keyword">l</span>; i++) {
<span class="hljs-keyword">out</span> = <span class="hljs-keyword">out</span> + <span class="hljs-string">"<li>"</span> + options.fn(items[i]) + <span class="hljs-string">"</li>"</span>;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">out</span> + <span class="hljs-string">"</ul>"</span>;
});
</code></pre>
<p>When executed, the template will render:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Yehuda Katz<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Carl Lerche<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Alan Johnson<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
</code></pre>
<p>Block helpers have more features, such as the ability to create an else section (used, for instance, by the built-in if helper).</p>
<p>Since the contents of a block helper are escaped when you call <code>options.fn(context)</code>, Handlebars does not escape the results of a block helper. If it did, inner content would be double-escaped!</p>
<p><a href="block_helpers.html" class="more-info" target="_blank">Learn More: Block Helpers</a></p>
<h2>Handlebars Paths</h2>
<p>Handlebars supports simple paths, just like Mustache.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">p</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">p</span>></span></span>
</code></pre>
<p>Handlebars also supports nested paths, making it possible to look up properties nested below the current context.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>By </span><span class="hljs-expression">{{<span class="hljs-variable">author.name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>That template works with this context</p>
<pre><code>var context = {
title: <span class="hljs-string">"My First Blog Post!"</span>,
author: {
<span class="hljs-property">id</span>: <span class="hljs-number">47</span>,
<span class="hljs-property">name</span>: <span class="hljs-string">"Yehuda Katz"</span>
},
body: <span class="hljs-string">"My first post. Wheeeee!"</span>
};
</code></pre><p>This makes it possible to use Handlebars templates with more raw JSON objects.</p>
<p>Nested handlebars paths can also include <code>../</code> segments, which evaluate their paths against a parent context.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Comments<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"comments"</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-begin-block">#<span class="hljs-keyword">each</span> comments</span>}}</span><span class="xml">
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/posts/</span></span></span><span class="hljs-expression">{{<span class="hljs-variable">..</span><span class="hljs-end-block">/permalink</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">#</span></span></span><span class="hljs-expression">{{<span class="hljs-variable">id</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-end-block">/<span class="hljs-keyword">each</span></span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>Even though the link is printed while in the context of a comment, it can still go back to the main context (the post) to retrieve its permalink.</p>
<p>The <code>../</code> path segment references the parent template scope, not one level up in the context. This is because block helpers can invoke a block with any context, so the notion of "one level up" isn't particularly meaningful except as a reference to the parent template scope.</p>
<p>Handlebars also allows for name conflict resolution between helpers and data fields via a this reference:</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">p</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">.</span><span class="hljs-end-block">/name</span>}}</span><span class="xml"> or </span><span class="hljs-expression">{{<span class="hljs-variable">this</span><span class="hljs-end-block">/name</span>}}</span><span class="xml"> or </span><span class="hljs-expression">{{<span class="hljs-variable">this.name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">p</span>></span></span>
</code></pre>
<p>Any of the above would cause the <code>name</code> field on the current context to be used rather than a helper of the same name.</p>
<h2>Template comments with {{!-- --}} or {{! }}.</h2>
<p>You can use comments in your handlebars code just as you would in your code. Since there is generally some level of logic, this is a good practice.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
</span><span class="hljs-expression">{{!<span class="hljs-variable">--</span> <span class="hljs-variable">only</span> <span class="hljs-variable">output</span> <span class="hljs-variable">this</span> <span class="hljs-variable">author</span> <span class="hljs-variable">names</span> <span class="hljs-variable"><span class="hljs-keyword">if</span></span> <span class="hljs-variable">an</span> <span class="hljs-variable">author</span> <span class="hljs-variable">exists</span> <span class="hljs-variable">--</span>}}</span><span class="xml">
</span><span class="hljs-expression">{{<span class="hljs-begin-block">#<span class="hljs-keyword">if</span> author</span>}}</span><span class="xml">
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">firstName</span>}}</span><span class="xml"> </span><span class="hljs-expression">{{<span class="hljs-variable">lastName</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-end-block">/<span class="hljs-keyword">if</span></span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>The comments will not be in the resulting output. If you'd like the comments to show up. Just use html comments, and they will be output.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"entry"</span>></span>
</span><span class="hljs-expression">{{! <span class="hljs-variable">This</span> <span class="hljs-variable">comment</span> <span class="hljs-variable">will</span> <span class="hljs-variable">not</span> <span class="hljs-variable">be</span> <span class="hljs-variable"><span class="hljs-keyword">in</span></span> <span class="hljs-variable">the</span> <span class="hljs-variable">output</span> }}</span><span class="xml">
<span class="hljs-comment"><!-- This comment will be in the output --></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>Any comments that must contain <code>}}</code> or other handlebars tokens should use the <code>{{!-- --}}</code> syntax.</p>
<h2>Helpers</h2>
<p>Handlebars helpers can be accessed from any context in a template. You can register a helper with the <code>Handlebars.registerHelper</code> method.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"post"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>By </span><span class="hljs-expression">{{<span class="hljs-variable">fullName</span> <span class="hljs-variable">author</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Comments<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-begin-block">#<span class="hljs-keyword">each</span> comments</span>}}</span><span class="xml">
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>By </span><span class="hljs-expression">{{<span class="hljs-variable">fullName</span> <span class="hljs-variable">author</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">body</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-end-block">/<span class="hljs-keyword">each</span></span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span>
</code></pre>
<p>when using this context and helpers:</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> context = {
author: {firstName: <span class="hljs-string">"Alan"</span>, lastName: <span class="hljs-string">"Johnson"</span>},
body: <span class="hljs-string">"I Love Handlebars"</span>,
comments: [{
author: {firstName: <span class="hljs-string">"Yehuda"</span>, lastName: <span class="hljs-string">"Katz"</span>},
body: <span class="hljs-string">"Me too!"</span>
}]
};
Handlebars.registerHelper(<span class="hljs-string">'fullName'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(person)</span> </span>{
<span class="hljs-keyword">return</span> person.firstName + <span class="hljs-string">" "</span> + person.lastName;
});
</code></pre>
<p>results in:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"post"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>By Alan Johnson<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>I Love Handlebars<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Comments<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>By Yehuda Katz<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"body"</span>></span>Me Too!<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<p>Helpers receive the current context as the <code>this</code> context of the function.</p>
<pre><code class="lang-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-begin-block">#<span class="hljs-keyword">each</span> items</span>}}</span><span class="xml">
<span class="hljs-tag"><<span class="hljs-title">li</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">agree</span>_<span class="hljs-variable">button</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
</span><span class="hljs-expression">{{<span class="hljs-end-block">/<span class="hljs-keyword">each</span></span>}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></span>
</code></pre>
<p>when using this context and helpers:</p>
<pre><code class="lang-js">var context = {
<span class="hljs-label"> items:</span> [
{<span class="hljs-string">name:</span> <span class="hljs-string">"Handlebars"</span>, <span class="hljs-string">emotion:</span> <span class="hljs-string">"love"</span>},
{<span class="hljs-string">name:</span> <span class="hljs-string">"Mustache"</span>, <span class="hljs-string">emotion:</span> <span class="hljs-string">"enjoy"</span>},
{<span class="hljs-string">name:</span> <span class="hljs-string">"Ember"</span>, <span class="hljs-string">emotion:</span> <span class="hljs-string">"want to learn"</span>}
]
};
Handlebars.registerHelper(<span class="hljs-string">'agree_button'</span>, function() {
var emotion = Handlebars.escapeExpression(<span class="hljs-keyword">this</span>.emotion),
name = Handlebars.escapeExpression(<span class="hljs-keyword">this</span>.name);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Handlebars.SafeString(
<span class="hljs-string">"<button>I agree. I "</span> + emotion + <span class="hljs-string">" "</span> + name + <span class="hljs-string">"</button>"</span>
);
});
</code></pre>
<p>results in:</p>
<pre><code class="lang-html"><span class="hljs-variable"><ul></span>
<span class="hljs-variable"><li></span><span class="hljs-variable"><button></span>I agree. I love Handlebars<span class="hljs-variable"></button></span><span class="hljs-variable"></li></span>
<span class="hljs-variable"><li></span><span class="hljs-variable"><button></span>I agree. I enjoy Mustache<span class="hljs-variable"></button></span><span class="hljs-variable"></li></span>
<span class="hljs-variable"><li></span><span class="hljs-variable"><button></span>I agree. I want <span class="hljs-keyword">to</span> learn Ember<span class="hljs-variable"></button></span><span class="hljs-variable"></li></span>
<span class="hljs-variable"></ul></span>
</code></pre>
<p>If your helper returns HTML that you do not want escaped, make sure to return a new Handlebars.SafeString.</p>
<h2>Built-In Helpers</h2>
<p>Handlebars offers a variety of built-in helpers such as the if conditional and each iterator.</p>
<p><a href="builtin_helpers.html" class="more-info" target="_blank">Learn More: Built-In Helpers</a></p>
<h2>API Reference</h2>
<p>Handlebars offers a variety of APIs and utility methods for applications and helpers.</p>
<p><a href="reference.html" class="more-info" target="_blank">Learn More: API Reference</a></p>
<p></div><!-- End .contents</p>
<a class="issue-tracker" href="https://github.com/nimojs/handlebarsjs.org/issues">
发现翻译错误？告诉我们。
</a>
</div>
</div>
<div id="credits"></div>
<a href="http://github.com/nimojs/handlebarsjs.org/" id="github">
<img alt="Fork me on GitHub" src="static/images/forkme_right_darkblue_121621.png" />
</a>
</body>
</html>
|
