diff options
| author | nimojs <imhadley@163.com> | 2015-04-19 23:14:19 +0800 |
|---|---|---|
| committer | nimojs <imhadley@163.com> | 2015-04-19 23:14:19 +0800 |
| commit | cbaf08642e63b1dc50b99ba5ac41ea1ecc4b7163 (patch) | |
| tree | 2d2d55cfbd5e9b89a99223d2e30037ed4ba14cae /index.html | |
| parent | 720cb5a6ba938cb9864bd24d6df5527b5cdbfa91 (diff) | |
| download | handlebarsjs.org-master.zip handlebarsjs.org-master.tar.gz handlebarsjs.org-master.tar.bz2 | |
增加章节，静态资源文件目录调整
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 251 |
1 files changed, 233 insertions, 18 deletions
@@ -12,12 +12,12 @@ <div id="body"> <div id="header"> <a href="index.html"> - <img alt="Handlebars 中文网：轻逻辑语义化的模板引擎" src="images/handlebars_logo.png"/> + <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="images/handlebars-devswag.png"/> + <img alt="Buy Handlebars swag on DevSwag!" src="static/images/handlebars-devswag.png"/> </a> <div id="intro"> @@ -26,10 +26,8 @@ <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>Getting Started</h2> -<!-- Start .contents--> -<dic class="contents"> -<div class="bullet"> +<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> @@ -39,10 +37,8 @@ <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> -</div> -<p><a name="index-1.html" target="_blank"></a></p> -<div class="bullet"> +<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> @@ -53,18 +49,237 @@ <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> -</div> -<div class="bullet"> +<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> -<p><a href="demo/index-1.html" target="_blank">示例</a></p> +<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="#" class="more-info" target="_blank">了解更多：预编译</a></p> -</div> -</div> -<!-- End .contents--> +<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> @@ -72,7 +287,7 @@ </div> <div id="credits"></div> <a href="http://github.com/nimojs/handlebarsjs.org/" id="github"> - <img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" /> + <img alt="Fork me on GitHub" src="static/images/forkme_right_darkblue_121621.png" /> </a> </body> </html> |