Handlebars中文文档(译自官方版)
Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切。
Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Handlebars中,并开始使用Handlebars所提供的更丰富的功能。
开始
Handlebars模板看起来就像是正常的Html,并使用了嵌入的 handlebars 表达式。
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
handlebars表达式,是以 {{ 开始,跟一些内容,然后以 }} 结束。
更多资料:表达式
你可以通过<script>标签把一段模板加载到浏览器中。
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
在 JavaScript 中使用 Handlebars.compile 来编译模板。
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
还可以预编译模板。这样的话,就只需要一个更小的运行时库文件,并且对性能来说是一个极大的节约,因为这样就不必在浏览器中编译模板了。这点在移动版的开发中就更显的非常重要了。
更多资料:预编译
只需传递一个上下文context执行模板,即可得到返回的 HTML 的值
(译者注:通常来说在 js 中上下文就决定了当前函数的this的指向)
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
得到下面的HTML
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
更多资料:执行
Handlebars的 {{expression}} 表达式会返回一个 HTML编码 HTML-escape 过的值。如果不希望Handlebars来编码这些值,使用三个大括号即可:{{{。
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>
使用这段上下文(数据):
{
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
}
会得到如下结果:
<div class="entry">
<h1>All About <p> Tags</h1>
<div class="body">
<p>This is a post about <p> tags</p>
</div>
</div>
Handlebars 不会再对 Handlebars.SafeString 安全字符串进行编码。如果你写的 helper 用来生成 HTML,就经常需要返回一个 new Handlebars.SafeString(result)。在这种情况下,你就需要手动的来编码参数了。
Handlebars.registerHelper('link', function(text, url) {
text = Handlebars.Utils.escapeExpression(text);
url = Handlebars.Utils.escapeExpression(url);
var result = '<a href="' + url + '">' + text + '</a>';
return new Handlebars.SafeString(result);
});
这样来编码传递进来的参数,并把返回的值标记为 安全,这样的话,即便不是哟给你“三个大括号”,Handlebars 就不会再次编码它了。
块级表达式
块级表达式允许你定义一个helpers,并使用一个不同于当前的上下文(context)来调用你模板的一部分。现在考虑下这种情况,你需要一个helper来生成一段 HTML 列表: {{#list people}}{{firstName}} {{lastName}}{{/list}} 并使用下面的上下文(数据): { people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] } 此时需要创建一个 名为 list 的 helper 来生成这段 HTML 列表。这个 helper 使用 people 作为第一个参数,还有一个 options 对象(hash哈希)作为第二个参数。这个 options 对象有一个叫 fn 的属性,你可以传递一个上下文给它(fn),就跟执行一个普通的 Handlebars 模板一样: Handlebars.registerHelper('list', function(items, options) { var out = "
- ";
for(var i=0, l=items.length; i
- Yehuda Katz
- Carl Lerche
- Alan Johnson
Handlebars 路径
Handlebars 支持简单的路径,就像Mustache那样。
{{name}}
Handlebars 同样也支持嵌套的路径,这样的话就可以在当前的上下文中查找内部嵌套的属性了。{{title}}
By {{author.name}}
Comments
{{./name}} or {{this/name}} or {{this.name}}
上面的这一种方式都会将 name 字段引用到当前上下文上,而不是 helper 上的同名属性。 模板注释:{{! }} 或 {{!-- --}} ------------------------ 你可以在 handlebars 代码中加注释,就跟在代码中写注释一样。对于有一定程度的逻辑的部分来说,这倒是一个很好的实践。{{firstName}} {{lastName}}
{{/if}}By {{fullName author}}
Comments
{{#each comments}}By {{fullName author}}
By Alan Johnson
Comments
By Yehuda Katz
-
{{#each items}}
- {{agree_button}} {{/each}}
{{lastName}}, {{firstName}}
"; var template = Handlebars.compile(source); template({firstName: "Alan", lastName: "Johnson"}); 结果如下:Johnson, Alan
不过也可以在模板的某个区域切换上下文,使用内置的 with helper即可。{{title}}
{{#with author}}By {{firstName}} {{lastName}}
{{/with}}My first post!
By Charles Jolley
-
{{#each people}}
- {{this}} {{/each}}
- Yehuda Katz
- Alan Johnson
- Charles Jolley
{{this}}
{{else}}No content
{{/each}} 在使用 each 来循环列表的时候,可以使用 {{@index}} 来表示当前循环的索引值。 {{#each array}} {{@index}}: {{this}} {{/each}} 对于 object 类型的循环,可以使用 {{@key}} 来表示: {{#each object}} {{@key}}: {{this}} {{/each}} **if helper** if 表达式可以选择性的渲染一些区块。如果它的参数返回 false, undefined, null, "" 或 [](译注:还有 0)(都是JS中的“假”值),Handlebars 就不会渲染这一块内容:
{{title}}