handlebars:使用與安裝,基本語法,表達式,內置塊表達式,

handlebars

Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構建Web模板。它採用Logic-less template（無邏輯模版）的思路，在載入時被預編譯，而不是到了客戶端執行到代碼時再去編譯，這樣可以保證模板載入和運行的速度。Handlebars兼容Mustache，你可以在Handlebars中導入Mustache模板。

基本介紹

中文名：Handlebars
外文名：Handlebars

使用與安裝,基本語法,表達式,內置塊表達式,

使用與安裝

Handlebars的安裝非常簡單，你只需要從Github下載最新版本，你也可訪問下面網址獲取最新信息：http://handlebarsjs.com。

目前handlebars.js已經被許多項目廣泛使用了，handlebars是一個純JS庫，因此你可以像使用其他JS腳本一樣用script標籤來包含handlebars.js

基本語法

Handlebars expressions 是handlebars模板中最基本的單元，使用方法是加兩個花括弧{{value}}, handlebars模板會自動匹配相應的數值，對象甚至是函式。

例如：

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

你可以單獨建立一個模板,ID（或者class）和type很重要，因為你要用他們來獲取模板內容例如：

handlebars會根據上下文來自動對表達式進行匹配，如果匹配項是個變數，則會輸出變數的值，如果匹配項是個函式，則函式會被調用。

如果沒找到匹配項，則沒有輸出。表達式也支持點操作符，因此你可以使用{{content.title}}這樣的形式來調用嵌套的值或者方法， handlebars會根據當前上下文輸出content變數的title屬性的值。

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

//用jquery獲取模板

var tpl = $("#tpl").html();

//原生方法

var source = document.getElementById('#tpl').innerHTML;

//預編譯模板

var template = Handlebars.compile(source);

//模擬json數據

var context = { name: "zhaoshuai", content: "learn Handlebars"};

//匹配json內容

var html = template(context);

//輸入模板

$(body).html(html);

表達式

Block表達式

有時候當你需要對某條表達式進行更深入的操作時，Blocks就派上用場了，在Handlebars中，你可以在表達式後面跟隨一個#號來表示Blocks，然後通過{{/表達式}}來結束Blocks。如果當前的表達式是一個數組，則Handlebars會“自動展開數組”，並將Blocks的上下文設為數組中的元素。例如：

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

有以下json數據

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

編譯模板代碼同上…… 上面的代碼會自動匹配programme數據並展開數據，渲染DOM後就是這樣的

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

內置塊表達式

（Block helper）

1.each block helper

你可以使用內置的{{#each}}helper遍歷列表塊內容，用this來引用遍歷的元素例如：

對應適用的json數據

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

這裡的this指的是數組裡的每一項元素，和上面的Block很像，但原理是不一樣的這裡的name是數組，而內置的each就是為了遍歷數組用的，更複雜的數據也同樣適用。

2.if else block helper

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

例如：

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

對應適用json數據

var data = { info:['HTML5','CSS3',"WebGL"], "error":"數據取出錯誤"}

這裡{{#if}}判斷是否存在list數組，如果存在則遍歷list，如果不存在輸出錯誤信息

3.unless block helper

{{#unless}}這個語法是反向的if語法也就是當判斷的值為false時他會渲染DOM 例如：

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

4.with block helper

{{#with}}一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞和賦值。使用with的方法，我們可以將context轉移到數據的一個section裡面（如果你的數據包含section）。這個方法在操作複雜的template時候非常有用。

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

對應適用json數據

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

Handlebar的注釋（comments）

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

Handlebars的訪問（Path）

Handlebar支持路徑和mustache,Handlebar還支持嵌套的路徑，使得能夠查找嵌套低於當前上下文的屬性

可以通過.來訪問屬性也可以使用../,來訪問父級屬性。例如:（使用.訪問的例子）

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

對應json數據

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

例如：（使用../訪問）

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

對應適用json數據

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

自定義helper

Handlebars，可以從任何上下文可以訪問在一個模板，你可以使用Handlebars.registerHelper()方法來註冊一個helper。

調試技巧

把下面一段"debug helper"載入到你的JavaScript代碼里,然後在模板檔案里通過{{debug}}或是{{debug someValue}}方便調試數據

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外掛程式

handlebars

基本介紹

使用與安裝

基本語法

表達式

內置塊表達式

相關詞條

熱門詞條