Handlebars 為你提供了一個可以毫無挫折感的高效率書寫 語義化的模板 所必需的一切隐孽。
Mustache 模板和 Handlebars 是兼容的折剃，所以你可以把Mustache模板拿來導入到Handlebars中，并開始使用Handlebars所提供的更豐富的功能盯质。
開始
Handlebars模板看起來就像是正常的Html，并使用了嵌入的 handlebars 表達式恰矩。
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div></div>
handlebars表達式表伦，是以 {{
開始谦去，跟一些內(nèi)容，然后以 }}
結(jié)束蹦哼。更多資料：表達式
你可以通過<script>
標簽把一段模板加載到瀏覽器中鳄哭。
<script id="entry-template" type="text/x-handlebars-template"> template content</script>
在 JavaScript 中使用 Handlebars.compile
來編譯模板。
var source = $("#entry-template").html();var template = Handlebars.compile(source);
還可以預編譯模板纲熏。這樣的話妆丘，就只需要一個更小的運行時庫文件，并且對性能來說是一個極大的節(jié)約局劲，因為這樣就不必在瀏覽器中編譯模板了勺拣。這點在移動版的開發(fā)中就更顯的非常重要了。更多資料：預編譯
只需傳遞一個上下文context執(zhí)行模板鱼填，即可得到返回的 HTML 的值（譯者注：通常來說在 js 中上下文就決定了當前函數(shù)的this的指向）
var context = {title: "My New Post", body: "This is my first post!"}var html = template(context);
得到下面的HTML
<div class="entry"> <h1>My New Post</h1> <div class="body"> This is my first post! </div></div>
更多資料：執(zhí)行
Handlebars的 {{expression}}
表達式會返回一個 HTML編碼 HTML-escape
過的值药有。如果不希望Handlebars來編碼這些值，使用三個大括號即可：{{{
苹丸。
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div></div>
使用這段上下文（數(shù)據(jù)）：
{ title: "All about <p> Tags", body: "<p>This is a post about <p> tags</p>"}
會得到如下結(jié)果：
<div class="entry"> <h1>All About <p> Tags</h1> <div class="body"> <p>This is a post about <p> tags</p> </div></div>
Handlebars 不會再對 Handlebars.SafeString
安全字符串進行編碼愤惰。如果你寫的 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 = '<a href="' + url + '">' + text + '</a>'; return new Handlebars.SafeString(result);});
這樣來編碼傳遞進來的參數(shù)感憾，并把返回的值標記為 安全蜡励，這樣的話，即便不是喲給你“三個大括號”阻桅，Handlebars 就不會再次編碼它了凉倚。
塊級表達式
塊級表達式允許你定義一個helpers，并使用一個不同于當前的上下文（context）來調(diào)用你模板的一部分∩┏粒現(xiàn)在考慮下這種情況稽寒，你需要一個helper來生成一段 HTML 列表：
{{#list people}}{{firstName}} {{lastName}}{{/list}}
并使用下面的上下文（數(shù)據(jù)）：
{ people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ]}
此時需要創(chuàng)建一個 名為 list
的 helper 來生成這段 HTML 列表。這個 helper 使用 people
作為第一個參數(shù)趟章，還有一個options
對象（hash哈希）作為第二個參數(shù)杏糙。這個 options 對象有一個叫 fn
的屬性，你可以傳遞一個上下文給它（fn）蚓土，就跟執(zhí)行一個普通的 Handlebars 模板一樣：
Handlebars.registerHelper('list', function(items, options) { var out = "<ul>"; for(var i=0, l=items.length; i<l; i++) { out = out + "<li>" + options.fn(items[i]) + "</li>"; } return out + "</ul>";});
執(zhí)行之后宏侍，這個模板就會渲染出：
<ul> <li>Yehuda Katz</li> <li>Carl Lerche</li> <li>Alan Johnson</li></ul>
塊級的 helpers 還有很多其他的特性，比如可以創(chuàng)建一個 else
區(qū)塊（例如蜀漆，內(nèi)置的 if helper 就是用 else）谅河。
注意，因為在你執(zhí)行 options.fn(context)
的時候，這個 helper 已經(jīng)把內(nèi)容編碼一次了绷耍，所以 Handlebars 不會再對這個 helper 輸出的值進行編碼了吐限。如果編碼了，這些內(nèi)容就會被編碼兩 次褂始！更多資料：塊級Helpers譯文在此
Handlebars 路徑
Handlebars 支持簡單的路徑诸典，就像Mustache那樣。
<p>{{name}}</p>
Handlebars 同樣也支持嵌套的路徑崎苗，這樣的話就可以在當前的上下文中查找內(nèi)部嵌套的屬性了搂赋。
<div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div></div>
上面的模板使用下面這段上下文：
var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!"};
這樣一來 Handlebars 就可以直接把JSON數(shù)據(jù)拿來用了。
巢狀嵌套的 handlebars 路徑也可以使用 ../
益缠， 這樣會把路徑指向父級（上層）上下文。
<h1>Comments</h1><div id="comments"> {{#each comments}} <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2> <div>{{body}}</div> {{/each}}</div>
盡管 a 鏈接在輸出時是以 comment 評論為上下文的基公，但它仍然可以退回上一層的上下文（post上下文）并取出permalink（固定鏈接）值幅慌。（譯者注）上下文數(shù)據(jù)應該如下所示（源文檔并沒有給出）
var context = { post: { body:'這是文章內(nèi)容', permalink: 'http://xx.com/xx', comments:[{ title:'這篇文章不錯，贊一個' },{ title:'好文要頂轰豆！' }] }}
../
標識符表示對模板的父級作用域的引用胰伍，并不表示在上下文數(shù)據(jù)中的上一層。這是因為塊級 helpers 可以以任何上下文來調(diào)用一個塊級表達式酸休，所以這個【上一層】的概念用來指模板作用域的父級更有意義些骂租。
Handlebars也允許通過一個 this
的引用來解決 helpers 和 數(shù)據(jù)字段間的名字沖突：
<p>{{./name}} or {{this/name}} or {{this.name}}</p>
上面的這一種方式都會將 name
字段引用到當前上下文上，而不是 helper 上的同名屬性斑司。
模板注釋：{{! }} 或 {{!-- --}}
你可以在 handlebars 代碼中加注釋渗饮，就跟在代碼中寫注釋一樣。對于有一定程度的邏輯的部分來說宿刮，這倒是一個很好的實踐互站。
<div class="entry"> {{! only output this author names if an author exists }} {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{/if}}</div>
注釋是不會最終輸出到返回結(jié)果中的。如果你希望把注釋展示出來僵缺，就使用 HTML 的注釋就行了胡桃。
<div class="entry"> {{! This comment will not be in the output }} </div>
所有注釋都必須有 }}
，一些多行注釋可以使用 {{!-- --}}
語法磕潮。
Helpers
Handlebars 的 helpers 在模板中可以訪問任何的上下文翠胰。可以通過 Handlebars.registerHelper
方法注冊一個 helper自脯。
<div class="post"> <h1>By {{fullName author}}</h1> <div class="body">{{body}}</div> <h1>Comments</h1> {{#each comments}} <h2>By {{fullName author}}</h2> <div class="body">{{body}}</div> {{/each}}</div>
當時用下面的上下文數(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é)果：
<div class="post"> <h1>By Alan Johnson</h1> <div class="body">I Love Handlebars</div> <h1>Comments</h1> <h2>By Yehuda Katz</h2> <div class="body">Me Too!</div></div>
Helpers 會把當前的上下文作為函數(shù)中的 this
上下文之景。
<ul> {{#each items}} <li>{{agree_button}}</li> {{/each}}</ul>
當使用下面的 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( "<button>I agree. I " + this.emotion + " " + this.name + "</button>" );});
會得到如下結(jié)果：
<ul> <li><button>I agree. I love Handlebars</button></li> <li><button>I agree. I enjoy Mustache</button></li> <li><button>I agree. I want to learn Ember</button></li></ul>
如果你不希望你的 helper 返回的 HTML 值被編碼，就請務(wù)必返回一個 new Handlebars.SafeString
內(nèi)置的 Helpers
with
helper
一般情況下膏潮，Handlebars 模板在計算值時闺兢，會把傳遞給模板的參數(shù)作為上下文。
var source = "<p>{{lastName}}, {{firstName}}</p>";var template = Handlebars.compile(source);template({firstName: "Alan", lastName: "Johnson"});
結(jié)果如下：
<p>Johnson, Alan</p>
不過也可以在模板的某個區(qū)域切換上下文，使用內(nèi)置的 with
helper即可屋谭。
<div class="entry"> <h1>{{title}}</h1> {{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}</div>
在使用下面數(shù)據(jù)作為上下文時：
{ title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" }}
會得到如下結(jié)果：
<div class="entry"> <h1>My first post!</h1> <h2>By Charles Jolley</h2></div>
each
helper
你可以使用內(nèi)置的 each
helper 來循環(huán)一個列表脚囊，循環(huán)中可以使用 this
來代表當前被循環(huán)的列表項。
<ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}}</ul>
使用這個上下文：
{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ]}
會得到：
<ul class="people_list"> <li>Yehuda Katz</li> <li>Alan Johnson</li> <li>Charles Jolley</li></ul>
事實上桐磁，可以使用 this
表達式在任何上下文中表示對當前的上下文的引用悔耘。
還可以選擇性的使用 else
，當被循環(huán)的是一個空列表的時候會顯示其中的內(nèi)容我擂。
{{#each paragraphs}} <p>{{this}}</p>{{else}} <p class="empty">No content</p>{{/each}}
在使用 each
來循環(huán)列表的時候衬以，可以使用 {{@index}}
來表示當前循環(huán)的索引值。
{{#each array}} {{@index}}: {{this}}{{/each}}
對于 object 類型的循環(huán)校摩，可以使用 {{@key}}
來表示：
{{#each object}} {{@key}}: {{this}}{{/each}}
if
helper
if
表達式可以選擇性的渲染一些區(qū)塊看峻。如果它的參數(shù)返回 false
, undefined
, null
, ""
或 []
（**譯注：還有 0
**）（都是JS中的“假”值），Handlebars 就不會渲染這一塊內(nèi)容：
<div class="entry"> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{/if}}</div>
當時用一個空對象（{}
）作為上下文時衙吩，會得到：
<div class="entry"></div>
在使用 if
表達式的時候互妓，可以配合 {{else}}
來使用，這樣當參數(shù)返回 假 值時坤塞，可以渲染 else 區(qū)塊：
<div class="entry"> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{else}} <h1>Unknown Author</h1> {{/if}}</div>
unless
helper
unless
helper 和 if
helper 是正好相反的冯勉，當表達式返回假值時就會渲染其內(nèi)容：
<div class="entry"> {{#unless license}} <h3 class="warning">WARNING: This entry does not have a license!</h3> {{/unless}}</div>
如果在當前上下文中查找 license
返回假值，Handlebars 就會渲染這段警告信息摹芙。反之灼狰，就什么也不輸出。
log
helper
log
helper 可以在執(zhí)行模板的時候輸出當前上下文的狀態(tài)浮禾。
{{log "Look at me!"}}
這樣會把委托信息發(fā)送給 Handlebars.logger.log
交胚，而且這個函數(shù)可以重寫來實現(xiàn)自定義的log。
轉(zhuǎn)載請注明來自[超2真人]本文鏈接：http://www.peichao01.com/static_content/doc/html/introduce-handlebars.html
