handlerbar

安装和使用

Handlebars的安装非常简单，你只需要从Github下载最新版本，我们离发布1.0版本还有点距离，但是handlebars.js已经被许多项目广泛使用了，handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js：
[code]
<script type="text/javascript" src="/scripts/handlebars-0.9.0.pre.4.js">
</pre>
<p>一开始，你可能想在文件中直接内联模版代码来体验handlebars，很简单，你可以用一个自定义类型的script标签将模版直接包含在文档中：</p>
<pre name="code" class="javascript">
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>

{{/users}}
</tbody>
</table>

</script>

[/code]
接下来你可以使用下面的代码来编译，处理以及显示模版。
[code]
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data ={ users:[
{username:"alan", firstName:"Alan", lastName:"Johnson", email:"alan@test.com"},
{username:"allison", firstName:"Allison", lastName:"House", email:"allison@test.com"},
{username:"ryan", firstName:"Ryan", lastName:"Carson", email:"ryan@test.com"}
]};
$("#content-placeholder").html(template(data));
[/code]

在上面的代码里我使用了jQuery，但是Handlebars并不依赖jQuery，因此，你也可以使用其他任何一个你喜欢的框架。还有一点就是handlebars会将模版编译成一个JS函数，这样使用起来就方便多了。

基本表达式

handles模版中最简单的动态元件就是表达式（expression），每个表达式像{{表达式}}这样由两个大括号包裹，当模版中出现一个表达式，handlebars会根据上下文来自动对表达式进行匹配，如果匹配项是个变量，则会输出变量的值，如果匹配项是个函数，则函数会被调用。如果没找到匹配项，则没有输出。表达式也支持点操作符，因此你可以使用{{user.firstName}}这样的形式来调用嵌套的值或者方法，handlebars会根据当前上下文输出user变量的firstName属性的值。

另外，handlebars默认会对结果进行escape，如果你希望将结果原样输出，可以使用{{{表达式}}}来告诉handlebars不要对结果进行escape。

Blocks

有时候当你需要对某条表达式进行更深入的操作时，Blocks就派上用场了，在Handlebars中，你可以在表达式后面跟随一个#号来表示Blocks，然后通过{{/表达式}}来结束Blocks。

如果当前的表达式是一个数组，则Handlebars会自动展开数组，并将Blocks的上下文设为数组中的项目，让我们来看看下面的例子：
[code]
var data ={ people:[
{name:"Alan"},
{name:"Allison"},
{name:"Ryan"}
], group:"Bloggers"};

<script type="text/x-handlebars-template">
<ul>
{{#people}}
<li>{{name}}</li>

{{/people}}
</ul>

</script>

[/code]

因为Blocks改变了表达式的上下文，handlebars提供了”../表达式“方式供Blocks中的表达式访问上一层的上下文，所以在上面的例子中，我们可以使用../group很方便的输出group的值：
[code]
<script type="text/x-handlebars-template">
<ul>
{{#people}}
<li>{{name}} - {{../group}}</li>

{{/people}}
</ul>

</script>
[/code]

如果表达式不是一个数组，则Blocks的执行上下文不会变化，这样你可以少打很多字来输出对象的属性。
[code]
var data ={ person:{
firstName:"Alan",
lastName:"Johnson",
email:"alan@test.com",
phone:"123-456-7890"
}};

<script type="text/x-handlebars-template">
{{#person}}
<div>Name: {{firstName}} {{lastName}}</div>
<div>Email: {{email}}</div>
<div>Phone: {{phone}}</div>

{{/person}}
</script>
[/code]