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

還可以預編譯模板。這樣的話，就只需要一個更小的運行時庫文件，并且對性能來說是一個極大的節約，因為這樣就不必在瀏覽器中編譯模板了。這點在移動版的開發中就更顯的非常重要了。
更多資料：預編譯

只需傳遞一個上下文context執行模板，即可得到返回的 HTML 的值
（譯者注：通常來說在 js 中上下文就決定了當前函數的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!
  

更多資料：執行

Handlebars的 {{expression}} 表達式會返回一個 HTML編碼 HTML-escape 過的值。如果不希望Handlebars來編碼這些值，使用三個大括號即可：{{{。

  
{{title}}
  

    {{{body}}}
  

使用這段上下文（數據）：

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

會得到如下結果：

  
All About 
 Tags
  

    
This is a post about 
 tags
  

Handlebars 不會再對 Handlebars.SafeString 安全字符串進行編碼。如果你寫的 helper 用來生成 HTML，就經常需要返回一個 new Handlebars.SafeString(result)。在這種情況下，你就需要手動的來編碼參數了。

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

  var result = "" + text + "";

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

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

塊級表達式允許你定義一個helpers，并使用一個不同于當前的上下文（context）來調用你模板的一部分。現在考慮下這種情況，你需要一個helper來生成一段 HTML 列表：

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

并使用下面的上下文（數據）：

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

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

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

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

  return out + "
";
});

執行之后，這個模板就會渲染出：

  
Yehuda Katz
  
Carl Lerche
  
Alan Johnson

塊級的 helpers 還有很多其他的特性，比如可以創建一個 else 區塊（例如，內置的 if helper 就是用 else）。

注意，因為在你執行 options.fn(context) 的時候，這個 helper 已經把內容編碼一次了，所以 Handlebars 不會再對這個 helper 輸出的值進行編碼了。如果編碼了，這些內容就會被編碼兩 次！
更多資料：塊級Helpers
譯文在此

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

{{name}}

Handlebars 同樣也支持嵌套的路徑，這樣的話就可以在當前的上下文中查找內部嵌套的屬性了。

  
{{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數據拿來用了。

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

Comments


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

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

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

../ 標識符表示對模板的父級作用域的引用，并不表示在上下文數據中的上一層。這是因為塊級 helpers 可以以任何上下文來調用一個塊級表達式，所以這個【上一層】的概念用來指模板作用域的父級更有意義些。

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

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

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

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

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

注釋是不會最終輸出到返回結果中的。如果你希望把注釋展示出來，就使用 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}}

當時用下面的上下文數據和 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;
});

會得到如下結果：

  
By Alan Johnson
  
I Love Handlebars

  
Comments

  
By Yehuda Katz
  
Me Too!

Helpers 會把當前的上下文作為函數中的 this 上下文。

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

當使用下面的 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 + ""
  );
});

會得到如下結果：

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

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

一般情況下，Handlebars 模板在計算值時，會把傳遞給模板的參數作為上下文。

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

結果如下：

Johnson, Alan

不過也可以在模板的某個區域切換上下文，使用內置的 with helper即可。

  
{{title}}

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

在使用下面數據作為上下文時：

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

會得到如下結果：

  
My first post!

  
By Charles Jolley

你可以使用內置的 each helper 來循環一個列表，循環中可以使用 this 來代表當前被循環的列表項。

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

使用這個上下文：

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

會得到：

  
Yehuda Katz
  
Alan Johnson
  
Charles Jolley

事實上，可以使用 this 表達式在任何上下文中表示對當前的上下文的引用。

還可以選擇性的使用 else ，當被循環的是一個空列表的時候會顯示其中的內容。

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

在使用 each 來循環列表的時候，可以使用 {{@index}} 來表示當前循環的索引值。

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

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

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

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

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

當時用一個空對象（{}）作為上下文時，會得到：

在使用 if 表達式的時候，可以配合 {{else}} 來使用，這樣當參數返回 假 值時，可以渲染 else 區塊：

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

unless helper 和 if helper　是正好相反的，當表達式返回假值時就會渲染其內容：

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

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

log helper 可以在執行模板的時候輸出當前上下文的狀態。

{{log "Look at me!"}}

這樣會把委托信息發送給 Handlebars.logger.log，而且這個函數可以重寫來實現自定義的log。

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