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

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

只需傳遞一個上下文context執(zhí)行模板，即可得到返回的 HTML 的值
（譯者注：通常來說在 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á)式會返回一個 HTML編碼 HTML-escape 過的值。如果不希望Handlebars來編碼這些值，使用三個大括號即可：{{{。

  
{{title}}
  

    {{{body}}}
  

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

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

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

  
All About 
 Tags
  

    
This is a post about 
 tags
  

Handlebars 不會再對 Handlebars.SafeString 安全字符串進(jìn)行編碼。如果你寫的 helper 用來生成 HTML，就經(jīng)常需要返回一個 new Handlebars.SafeString(result)。在這種情況下，你就需要手動的來編碼參數(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);
});

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

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

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

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

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

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

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

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

  return out + "
";
});

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

  
Yehuda Katz
  
Carl Lerche
  
Alan Johnson

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

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

Handlebars 支持簡單的路徑，就像Mustache那樣。

{{name}}

Handlebars 同樣也支持嵌套的路徑，這樣的話就可以在當(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!"
};

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

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

Comments


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

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

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

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

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

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

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

你可以在 handlebars 代碼中加注釋，就跟在代碼中寫注釋一樣。對于有一定程度的邏輯的部分來說，這倒是一個很好的實(shí)踐。

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

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

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

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

Handlebars 的 helpers 在模板中可以訪問任何的上下文。可以通過 Handlebars.registerHelper 方法注冊一個 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;
});

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

  
By Alan Johnson
  
I Love Handlebars

  
Comments

  
By Yehuda Katz
  
Me Too!

Helpers 會把當(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 + ""
  );
});

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

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

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

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

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

結(jié)果如下：

Johnson, Alan

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

  
{{title}}

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

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

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

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

  
My first post!

  
By Charles Jolley

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

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

使用這個上下文：

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

會得到：

  
Yehuda Katz
  
Alan Johnson
  
Charles Jolley

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{log "Look at me!"}}

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

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