介紹

Handlebars?是 JavaScript 一個(gè)語(yǔ)義模板庫(kù)，通過(guò)對(duì)view和data的分離來(lái)快速構(gòu)建Web模板。它采用"Logic-less template"（無(wú)邏輯模版）的思路，在加載時(shí)被預(yù)編譯，而不是到了客戶端執(zhí)行到代碼時(shí)再去編譯， 這樣可以保證模板加載和運(yùn)行的速度。Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板。

使用與安裝

Handlebars的安裝非常簡(jiǎn)單，你只需要從Github下載最新版本，你也可訪問(wèn)下面網(wǎng)址獲取最新信息：http://handlebarsjs.com。?
目前handlebars.js已經(jīng)被許多項(xiàng)目廣泛使用了，handlebars是一個(gè)純JS庫(kù)，因此你可以像使用其他JS腳本一樣用script標(biāo)簽來(lái)包含handlebars.js

<script type="text/javascript" src=".js/handlebars.js"></script> 

基本語(yǔ)法

Handlebars expressions 是handlebars模板中最基本的單元，使用方法是加兩個(gè)花括號(hào){{value}}, handlebars模板會(huì)自動(dòng)匹配相應(yīng)的數(shù)值，對(duì)象甚至是函數(shù)。?
例如：

<div class="demo">  <h1>{{name}}</h1> <p>{{content}}</p> </div> 

你可以單獨(dú)建立一個(gè)模板,ID（或者class）和type很重要，因?yàn)槟阋盟麄儊?lái)獲取模板內(nèi)容 例如：

<script id="tpl" type="text/x-handlebars-template"> <div class="demo"> <h1>{{title}}</h1> <p>{{content.title}}</p> </div> </script> 

handlebars會(huì)根據(jù)上下文來(lái)自動(dòng)對(duì)表達(dá)式進(jìn)行匹配，如果匹配項(xiàng)是個(gè)變量，則會(huì)輸出變量的值，如果匹配項(xiàng)是個(gè)函數(shù)，則函數(shù)會(huì)被調(diào)用。?
如果沒(méi)找到匹配項(xiàng)，則沒(méi)有輸出。表達(dá)式也支持點(diǎn)操作符，因此你可以使用{{content.title}}這樣的形式來(lái)調(diào)用嵌套的值或者方法， handlebars會(huì)根據(jù)當(dāng)前上下文輸出content變量的title屬性的值。

在JavaScript中，使用Handlebars.compile()方法來(lái)預(yù)編譯模板 例如：(這是一套規(guī)則)

    //用jquery獲取模板var tpl   =  $("#tpl").html();//原生方法var source = document.getElementById('#tpl').innerHTML; //預(yù)編譯模板 var template = Handlebars.compile(source); //模擬json數(shù)據(jù) var context = { name: "zhaoshuai", content: "learn Handlebars"}; //匹配json內(nèi)容 var html = template(context); //輸入模板 $(body).html(html); 

Handlebar的表達(dá)式

Block表達(dá)式

有時(shí)候當(dāng)你需要對(duì)某條表達(dá)式進(jìn)行更深入的操作時(shí)，Blocks就派上用場(chǎng)了，在Handlebars中，你可以在表達(dá)式后面跟隨一個(gè)#號(hào)來(lái)表示Blocks，然后通過(guò){{/表達(dá)式}}來(lái)結(jié)束B(niǎo)locks。 如果當(dāng)前的表達(dá)式是一個(gè)數(shù)組，則Handlebars會(huì)“自動(dòng)展開(kāi)數(shù)組”，并將Blocks的上下文設(shè)為數(shù)組中的元素。 例如：

<ul>  
{{#programme}}<li>{{language}}</li> {{/programme}} </ul> 

有以下json數(shù)據(jù)

{programme: [{language: "JavaScript"},{language: "HTML"},{language: "CSS"}]
}

編譯模板代碼同上…… 上面的代碼會(huì)自動(dòng)匹配programme數(shù)據(jù)并展開(kāi)數(shù)據(jù)，渲染DOM后就是這樣的

<ul>  <li>JavaScript</li> <li>HTML</li> <li>CSS</li> </ul> 

Handlebars的內(nèi)置塊表達(dá)式（Block helper）

1.each block helper

你可以使用內(nèi)置的{{#each}}?helper遍歷列表塊內(nèi)容(單個(gè)元素的數(shù)組)，用this來(lái)引用遍歷的元素 例如：

<ul>  {{#each name}}<li>{{this}}</li> {{/each}} </ul> 

對(duì)應(yīng)適用的json數(shù)據(jù)

{name: ["html","css","javascript"]
};

這里的this指的是數(shù)組里的每一項(xiàng)元素，和上面的Block很像，但原理是不一樣的這里的name是數(shù)組，而內(nèi)置的each就是為了遍歷數(shù)組用的，更復(fù)雜的數(shù)據(jù)也同樣適用。

2.if else block helper

{{#if}}就你使用JavaScript一樣，你可以指定條件渲染DOM，如果它的參數(shù)返回false，undefined, null, "" 或者 [] (a "falsy" value), Handlebar將不會(huì)渲染DOM，如果存在{{#else}}則執(zhí)行{{#else}}后面的渲染?
例如：

{{#if list}}
<ul id="list">  {{#each list}}<li>{{this}}</li> {{/each}} </ul> {{else}} <p>{{error}}</p> {{/if}} 

對(duì)應(yīng)適用json數(shù)據(jù)

var data = {  info:['HTML5','CSS3',"WebGL"],"error":"數(shù)據(jù)取出錯(cuò)誤"
}

這里{{#if}}判斷是否存在list數(shù)組，如果存在則遍歷list，如果不存在輸出錯(cuò)誤信息

3.unless block helper

{{#unless}}這個(gè)語(yǔ)法是反向的if語(yǔ)法也就是當(dāng)判斷的值為false時(shí)他會(huì)渲染DOM 例如：

{{#unless data}}
<ul id="list">  {{#each list}}<li>{{this}}</li> {{/each}} </ul> {{else}} <p>{{error}}</p> {{/unless}} 

4.with block helper

{{#with}}一般情況下，Handlebars模板會(huì)在編譯的階段的時(shí)候進(jìn)行context傳遞和賦值。使用with的方法，我們可以將context轉(zhuǎn)移到數(shù)據(jù)的一個(gè)section里面（如果你的數(shù)據(jù)包含section）。 這個(gè)方法在操作復(fù)雜的template時(shí)候非常有用。

<div class="entry">  <h1>{{title}}</h1> {{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}} </div> 

對(duì)應(yīng)適用json數(shù)據(jù)

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

Handlebar的注釋（comments）

Handlebars也可以使用注釋寫法如下

{{! handlebars comments }}

Handlebars的訪問(wèn)（Path）

Handlebar支持路徑和mustache,Handlebar還支持嵌套的路徑，使得能夠查找嵌套低于當(dāng)前上下文的屬性?
可以通過(guò).來(lái)訪問(wèn)屬性也可以使用../,來(lái)訪問(wèn)父級(jí)屬性。 例如:（使用.訪問(wèn)的例子）

<h1>{{author.id}}</h1>  

對(duì)應(yīng)json數(shù)據(jù)

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

例如：（使用../訪問(wèn)）

{{#with person}}<h1>{{../company.name}}</h1>
{{/with}}

對(duì)應(yīng)適用json數(shù)據(jù)

{"person":{ "name": "Alan" }, company: {"name": "Rad, Inc." } }; 

自定義helper

Handlebars，可以從任何上下文可以訪問(wèn)在一個(gè)模板，你可以使用Handlebars.registerHelper()方法來(lái)注冊(cè)一個(gè)helper。

調(diào)試技巧

把下面一段"debug helper"加載到你的JavaScript代碼里,然后在模板文件里通過(guò){{debug}}或是{{debug someValue}}方便調(diào)試數(shù)據(jù)

Handlebars.registerHelper("debug", function(optionalValue) {  console.log("Current Context"); console.log("===================="); console.log(this); if (optionalValue) { console.log("Value"); console.log("===================="); console.log(optionalValue); } }); 

handlebars的jquery插件

(function($) {var compiled = {};$.fn.handlebars = function(template, data) { if (template instanceof jQuery) { template = $(template).html(); } compiled[template] = Handlebars.compile(template); this.html(compiled[template](data)); }; })(jQuery); $('#content').handlebars($('#template'), { name: "Alan" });

轉(zhuǎn)載于:https://www.cnblogs.com/gopark/p/8145949.html

總結(jié)

以上是生活随笔為你收集整理的Handlebars模板引擎的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。