Js 模版 ——Handlebars.js 初步

原文地址：

http://blog.teamtreehouse.com/getting-started-with-handlebars-js

本文只是翻译。主要目的是锻炼一下翻译及语言组织能力，水平有限，不足之处望批评指正。

现在越来越多的Web应用程序开始使用 Javascript 来创建动态接口,这个趋势不会立即改变。DOM操作非常适合简单的 Javascript应用程序，但是，当每次改变 view 都需要改变 document 中大量节点的时候，你会怎么做？这时就需要引入 Javascript的模版。

已经有很多非常好的 Javascript templating 类库可用。我第一次使用的是 mushtache.js 类库，这个类库使用的是非常优秀的 Mustache templating 语言，现在已经转移到使用 John Resig's 的 Javascript Micro-Templating 阶段。Jquery 也有自己官方的 templating 插件，Underscore.js 也是。我个人最喜欢的 Javascript templating 语言是Handlebar.js。

为什么是Handlebars.js?

我得承认的一点是我有一点点的偏见，我曾经和 Yehuda katz 一起开发过 Handlebars.js。之所以开发 Handlebars的原因是虽然我们从整体上很喜欢 Mustache's 的 "logic-less templating” 方法，但是这个方法在处理需要通过 global helpers 必须跳出 hoops 的时候，花费了大量的时间，此外，这个方法还缺少对增加变量来进一步提升 template's 的访问堆栈的支持。我们希望 templates 能够预编译而不是在客户端编译，并且还希望可以开发一个最快速的 templating 语言。虽然我们最终没有完成一个绝对最快的 Javascript templating框架，但是Handlebars.js 也算的上是轻量且快速的，毕竟它达到我们其他方面的目标。

安装及使用

最简单的安装方法是从 GitHub 项目上下载最新的 Handlebars.js 可执行版本。我们还没发布 1.0 的 release 版，但是 Handlebars.js 已经在相当一部分的项目中开始使用了。 Handlebars.js 只是 Javascript 的一个类库，所以你只需要像其他脚本一样加载在页面中即可。

<script type="text/javascript"
    src="/scripts/handlebars-0.9.0.pre.4.js" />

对于一般的模版而言，你可能只是希望将你的模版直接嵌入到 document 中，可以使用 script 标签配置一个 type 属性即可：

<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: "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));

上面的代码中使用的 Jquery, 但是 Handlebars 是可以在任意一个你想使用的框架下工作的。值得注意的一点是： Handlebars 会把 templates 当作一个 Javascript 的 function 来编译，这使得其执行起来非常容易。

基本语法

Handlebars temlate 中最简单可变的元素是 expression，一个 expression 可以被大括号包围起来，像这样 {{expression}} 。当 template 执行到该语句时， Handlebars 会在当前上下文中查找所有符合条件的 item，如果当前符合条件的 item 是一个 value， 则输出这个 value，如果 item 是一个 function，则调用这个 function。如果没有任何满足条件的 item，则什么也不会输出。 Expression 支持 (.) 操作符来输出嵌套的值，例如，{{user.firstname}} 会输出当前上下文中 user 的 firstname 属性值。 默认情况下，Handlebars 会避免输出一个表达式最为结果，但是如果使用三重括号，{{{expression}}}，则这个表达式会作为值输出。

块

有些时候在一个 template 中集中一个特定的表达式将有助于开发工作，这时就需要引入 blocks。 Blocks 在 Handlebars 以 (#) 符号表示，后面跟着一个表达式， 结束 Blocks 使用一个关闭的反斜杠, {{/expression}}。

如果给定的表达式表示的是一个数组， Handlebars 会自动迭代数组中的每一个元素，并设置其对应的上下文。下面是一个示例：

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 支持以 ../ 表达式来进入其父节点的上下文。所以在上面的例子中，当迭代 people 中每个人的时候，我们可以使用 ../group 输出其组名：

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

如果一个块表达式代表的是除数组之外的另外一种结构，Hanldebars 会简单的将当前上下文设置为计算 expression 所得到的结果。在输出一个对象的属性时，这种方法可以节省了大量的代码量。

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>

下一步是什么?

本文有许多内容都还没有涉及，所以我会在下周对 Handlebars 更加高级的技术作一个介绍。我们将会涉及 分离、块helpers、全局heplers、预编译等技术。