介紹
Handlebars 是 JavaScript 一個語義模板庫,通過對view和data的分離來快速構建Web模板。它采用"Logic-less template"(無邏輯模版)的思路,在加載時被預編譯,而不是到了客戶端執行到代碼時再去編譯, 這樣可以保證模板加載和運行的速度。Handlebars兼容Mustache,你可以在Handlebars中導入Mustache模板。
使用與安裝
Handlebars的安裝非常簡單,你只需要從Github下載最新版本,你也可訪問下面網址獲取最新信息:http://handlebarsjs.com。
目前handlebars.js已經被許多項目廣泛使用了,handlebars是一個純JS庫,因此你可以像使用其他JS腳本一樣用script標簽來包含handlebars.js
script type="text/javascript" src=".js/handlebars.js"></script>
基本語法
Handlebars expressions 是handlebars模板中最基本的單元,使用方法是加兩個花括號{{value}}
, handlebars模板會自動匹配相應的數值,對象甚至是函數。
例如:
<div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div>
你可以單獨建立一個模板,ID(或者class)和type很重要,因為你要用他們來獲取模板內容 例如:
<script id="tpl" type="text/x-handlebars-template"> <div class="demo"> <h1>{{title}}</h1> <p>{{content.title}}</p> </div> </script>
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);
Handlebar的表達式
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>
Handlebars的內置塊表達式(Block helper)
1.each block helper
你可以使用內置的{{#each}}
helper遍歷列表塊內容,用this
來引用遍歷的元素 例如:
<ul> {{#each name}} <li>{{this}}</li> {{/each}} </ul>
對應適用的json數據
{ name: ["html","css","javascript"] };
這里的this
指的是數組里的每一項元素,和上面的Block很像,但原理是不一樣的這里的name是數組,而內置的each就是為了遍歷數組用的,更復雜的數據也同樣適用。
2.if else block helper{{#if}}
就你使用JavaScript一樣,你可以指定條件渲染DOM,如果它的參數返回false,undefined, 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 comments }}
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插件
(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" });
這個主要應用到移動開發上面,下面我給你上兩張圖片,你就會明白了
同樣都是兩個HTML 第一個文檔是10kb 第二個是20KB 很顯然節省了流量。現在流量的費用可是很貴的哦!