原文地址：
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、預編譯等技術。