handlerbar

安装和使用

Handlebars的安装非常简单，你只需要从Github下载最新版本，我们离发布1.0版本还有点距离，但是handlebars.js已经被许多项目广泛使用了，handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js：

 <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>

接下来你可以使用下面的代码来编译，处理以及显示模版。

  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data ={ users:[
      {username:"alan", firstName:"Alan", lastName:"Johnson", email:"[email protected]"},
      {username:"allison", firstName:"Allison", lastName:"House", email:"[email protected]"},
      {username:"ryan", firstName:"Ryan", lastName:"Carson", email:"[email protected]"}
    ]};
  $("#content-placeholder").html(template(data));

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

基本表达式

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

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

Blocks

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

如果当前的表达式是一个数组，则Handlebars会自动展开数组，并将Blocks的上下文设为数组中的项目，让我们来看看下面的例子：

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>

因为Blocks改变了表达式的上下文，handlebars提供了”../表达式“方式供Blocks中的表达式访问上一层的上下文，所以在上面的例子中，我们可以使用../group很方便的输出group的值：

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

    {{/people}}
  </ul>

</script>

如果表达式不是一个数组，则Blocks的执行上下文不会变化，这样你可以少打很多字来输出对象的属性。

var data ={ person:{
    firstName:"Alan",
    lastName:"Johnson",
    email:"[email protected]",
    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>