var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

還可以預(yù)編譯模板。這樣的話(huà)，就只需要一個(gè)更小的運(yùn)行時(shí)庫(kù)文件，并且對(duì)性能來(lái)說(shuō)是一個(gè)極大的節(jié)約，因?yàn)檫@樣就不必在瀏覽器中編譯模板了。這點(diǎn)在移動(dòng)版的開(kāi)發(fā)中就更顯的非常重要了。
更多資料：預(yù)編譯

只需傳遞一個(gè)上下文context執(zhí)行模板，即可得到返回的 HTML 的值
（譯者注：通常來(lái)說(shuō)在 js 中上下文就決定了當(dāng)前函數(shù)的this的指向）

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

得到下面的HTML

  
My New Post
  

    This is my first post!
  

更多資料：執(zhí)行

Handlebars的 {{expression}} 表達(dá)式會(huì)返回一個(gè) HTML編碼 HTML-escape 過(guò)的值。如果不希望Handlebars來(lái)編碼這些值，使用三個(gè)大括號(hào)即可：{{{。

  
{{title}}
  

    {{{body}}}
  

使用這段上下文（數(shù)據(jù)）：

{
  title: "All about 
 Tags",
  body: "
This is a post about 
 tags
"
}

會(huì)得到如下結(jié)果：

  
All About 
 Tags
  

    
This is a post about 
 tags
  

Handlebars 不會(huì)再對(duì) Handlebars.SafeString 安全字符串進(jìn)行編碼。如果你寫(xiě)的 helper 用來(lái)生成 HTML，就經(jīng)常需要返回一個(gè) new Handlebars.SafeString(result)。在這種情況下，你就需要手動(dòng)的來(lái)編碼參數(shù)了。

Handlebars.registerHelper("link", function(text, url) {
  text = Handlebars.Utils.escapeExpression(text);
  url  = Handlebars.Utils.escapeExpression(url);

  var result = "" + text + "";

  return new Handlebars.SafeString(result);
});

這樣來(lái)編碼傳遞進(jìn)來(lái)的參數(shù)，并把返回的值標(biāo)記為 安全，這樣的話(huà)，即便不是喲給你“三個(gè)大括號(hào)”，Handlebars 就不會(huì)再次編碼它了。

塊級(jí)表達(dá)式允許你定義一個(gè)helpers，并使用一個(gè)不同于當(dāng)前的上下文（context）來(lái)調(diào)用你模板的一部分。現(xiàn)在考慮下這種情況，你需要一個(gè)helper來(lái)生成一段 HTML 列表：

{{#list people}}{{firstName}} {{lastName}}{{/list}}

并使用下面的上下文（數(shù)據(jù)）：

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

此時(shí)需要?jiǎng)?chuàng)建一個(gè) 名為 list 的 helper 來(lái)生成這段 HTML 列表。這個(gè) helper 使用 people 作為第一個(gè)參數(shù)，還有一個(gè) options 對(duì)象（hash哈希）作為第二個(gè)參數(shù)。這個(gè) options 對(duì)象有一個(gè)叫 fn 的屬性，你可以傳遞一個(gè)上下文給它（fn），就跟執(zhí)行一個(gè)普通的 Handlebars 模板一樣：

Handlebars.registerHelper("list", function(items, options) {
  var out = "
";

  for(var i=0, l=items.length; i" + options.fn(items[i]) + "";
  }

  return out + "
";
});

執(zhí)行之后，這個(gè)模板就會(huì)渲染出：

  
Yehuda Katz
  
Carl Lerche
  
Alan Johnson

塊級(jí)的 helpers 還有很多其他的特性，比如可以創(chuàng)建一個(gè) else 區(qū)塊（例如，內(nèi)置的 if helper 就是用 else）。

注意，因?yàn)樵谀銏?zhí)行 options.fn(context) 的時(shí)候，這個(gè) helper 已經(jīng)把內(nèi)容編碼一次了，所以 Handlebars 不會(huì)再對(duì)這個(gè) helper 輸出的值進(jìn)行編碼了。如果編碼了，這些內(nèi)容就會(huì)被編碼兩 次！
更多資料：塊級(jí)Helpers
譯文在此

Handlebars 支持簡(jiǎn)單的路徑，就像Mustache那樣。

{{name}}

Handlebars 同樣也支持嵌套的路徑，這樣的話(huà)就可以在當(dāng)前的上下文中查找內(nèi)部嵌套的屬性了。

  
{{title}}
  
By {{author.name}}

  

    {{body}}
  

上面的模板使用下面這段上下文：

var context = {
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
};

這樣一來(lái) Handlebars 就可以直接把JSON數(shù)據(jù)拿來(lái)用了。

巢狀嵌套的 handlebars 路徑也可以使用 ../， 這樣會(huì)把路徑指向父級(jí)（上層）上下文。

Comments


  {{#each comments}}
  
{{title}}
  
{{body}}
  {{/each}}

盡管 a 鏈接在輸出時(shí)是以 comment 評(píng)論為上下文的，但它仍然可以退回上一層的上下文（post上下文）并取出permalink（固定鏈接）值。
（譯者注）上下文數(shù)據(jù)應(yīng)該如下所示（源文檔并沒(méi)有給出）

var context = {
  post: {
    body:"這是文章內(nèi)容",
    permalink: "http://xx.com/xx",
    comments:[{
      title:"這篇文章不錯(cuò)，贊一個(gè)"
    },{
      title:"好文要頂！"
    }]
  }
}

../ 標(biāo)識(shí)符表示對(duì)模板的父級(jí)作用域的引用，并不表示在上下文數(shù)據(jù)中的上一層。這是因?yàn)閴K級(jí) helpers 可以以任何上下文來(lái)調(diào)用一個(gè)塊級(jí)表達(dá)式，所以這個(gè)【上一層】的概念用來(lái)指模板作用域的父級(jí)更有意義些。

Handlebars也允許通過(guò)一個(gè) this 的引用來(lái)解決 helpers 和 數(shù)據(jù)字段間的名字沖突：

{{./name}} or {{this/name}} or {{this.name}}

上面的這一種方式都會(huì)將 name 字段引用到當(dāng)前上下文上，而不是 helper 上的同名屬性。

你可以在 handlebars 代碼中加注釋?zhuān)透诖a中寫(xiě)注釋一樣。對(duì)于有一定程度的邏輯的部分來(lái)說(shuō)，這倒是一個(gè)很好的實(shí)踐。

  {{! only output this author names if an author exists }}
  {{#if author}}
    
{{firstName}} {{lastName}}
  {{/if}}

注釋是不會(huì)最終輸出到返回結(jié)果中的。如果你希望把注釋展示出來(lái)，就使用 HTML 的注釋就行了。

  {{! This comment will not be in the output }}
  

所有注釋都必須有 }}，一些多行注釋可以使用 {{!-- --}} 語(yǔ)法。

Handlebars 的 helpers 在模板中可以訪(fǎng)問(wèn)任何的上下文。可以通過(guò) Handlebars.registerHelper 方法注冊(cè)一個(gè) helper。

  
By {{fullName author}}
  
{{body}}

  
Comments

  {{#each comments}}
  
By {{fullName author}}
  
{{body}}
  {{/each}}

當(dāng)時(shí)用下面的上下文數(shù)據(jù)和 helpers：

var context = {
  author: {firstName: "Alan", lastName: "Johnson"},
  body: "I Love Handlebars",
  comments: [{
    author: {firstName: "Yehuda", lastName: "Katz"},
    body: "Me too!"
  }]
};

Handlebars.registerHelper("fullName", function(person) {
  return person.firstName + " " + person.lastName;
});

會(huì)得到如下結(jié)果：

  
By Alan Johnson
  
I Love Handlebars

  
Comments

  
By Yehuda Katz
  
Me Too!

Helpers 會(huì)把當(dāng)前的上下文作為函數(shù)中的 this 上下文。

  {{#each items}}
  
{{agree_button}}
  {{/each}}

當(dāng)使用下面的 this上下文 和 helpers：

var context = {
  items: [
    {name: "Handlebars", emotion: "love"},
    {name: "Mustache", emotion: "enjoy"},
    {name: "Ember", emotion: "want to learn"}
  ]
};

Handlebars.registerHelper("agree_button", function() {
  return new Handlebars.SafeString(
    "I agree. I " + this.emotion + " " + this.name + ""
  );
});

會(huì)得到如下結(jié)果：

  
I agree. I love Handlebars
  
I agree. I enjoy Mustache
  
I agree. I want to learn Ember

如果你不希望你的 helper 返回的 HTML 值被編碼，就請(qǐng)務(wù)必返回一個(gè) new Handlebars.SafeString

一般情況下，Handlebars 模板在計(jì)算值時(shí)，會(huì)把傳遞給模板的參數(shù)作為上下文。

var source   = "
{{lastName}}, {{firstName}}
";
var template = Handlebars.compile(source);
template({firstName: "Alan", lastName: "Johnson"});

結(jié)果如下：

Johnson, Alan

不過(guò)也可以在模板的某個(gè)區(qū)域切換上下文，使用內(nèi)置的 with helper即可。

  
{{title}}

  {{#with author}}
  
By {{firstName}} {{lastName}}
  {{/with}}

在使用下面數(shù)據(jù)作為上下文時(shí)：

{
  title: "My first post!",
  author: {
    firstName: "Charles",
    lastName: "Jolley"
  }
}

會(huì)得到如下結(jié)果：

  
My first post!

  
By Charles Jolley

你可以使用內(nèi)置的 each helper 來(lái)循環(huán)一個(gè)列表，循環(huán)中可以使用 this 來(lái)代表當(dāng)前被循環(huán)的列表項(xiàng)。

  {{#each people}}
  
{{this}}
  {{/each}}

使用這個(gè)上下文：

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

會(huì)得到：

  
Yehuda Katz
  
Alan Johnson
  
Charles Jolley

事實(shí)上，可以使用 this 表達(dá)式在任何上下文中表示對(duì)當(dāng)前的上下文的引用。

還可以選擇性的使用 else ，當(dāng)被循環(huán)的是一個(gè)空列表的時(shí)候會(huì)顯示其中的內(nèi)容。

{{#each paragraphs}}
  
{{this}}
{{else}}
  
No content
{{/each}}

在使用 each 來(lái)循環(huán)列表的時(shí)候，可以使用 {{@index}} 來(lái)表示當(dāng)前循環(huán)的索引值。

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

對(duì)于 object 類(lèi)型的循環(huán)，可以使用 {{@key}} 來(lái)表示：

{{#each object}}
  {{@key}}: {{this}}
{{/each}}

if 表達(dá)式可以選擇性的渲染一些區(qū)塊。如果它的參數(shù)返回 false, undefined, null, "" 或 []（譯注：還有 0）（都是JS中的“假”值），Handlebars 就不會(huì)渲染這一塊內(nèi)容：

  {{#if author}}
  
{{firstName}} {{lastName}}
  {{/if}}

當(dāng)時(shí)用一個(gè)空對(duì)象（{}）作為上下文時(shí)，會(huì)得到：

在使用 if 表達(dá)式的時(shí)候，可以配合 {{else}} 來(lái)使用，這樣當(dāng)參數(shù)返回 假 值時(shí)，可以渲染 else 區(qū)塊：

  {{#if author}}
    
{{firstName}} {{lastName}}
  {{else}}
    
Unknown Author
  {{/if}}

unless helper 和 if helper　是正好相反的，當(dāng)表達(dá)式返回假值時(shí)就會(huì)渲染其內(nèi)容：

  {{#unless license}}
  
WARNING: This entry does not have a license!
  {{/unless}}

如果在當(dāng)前上下文中查找 license 返回假值，Handlebars 就會(huì)渲染這段警告信息。反之，就什么也不輸出。

log helper 可以在執(zhí)行模板的時(shí)候輸出當(dāng)前上下文的狀態(tài)。

{{log "Look at me!"}}

這樣會(huì)把委托信息發(fā)送給 Handlebars.logger.log，而且這個(gè)函數(shù)可以重寫(xiě)來(lái)實(shí)現(xiàn)自定義的log。

轉(zhuǎn)載請(qǐng)注明來(lái)自[超2真人]
本文鏈接：http://www.peichao01.com/static_content/doc/html/introduce-handlebars.html