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、預編譯等技術。