示例在最后;
官網(wǎng)地址:http://handlebarsjs.com/
參考地址1:http://blog.csdn.net/fengqingtao2008/article/details/52711858
參考地址2:https://segmentfault.com/a/1190000008367747
1乍迄、如何引入Handlebars.js
首選要引入JQuery插件溉苛,其次在引用Handlebars.js即可练链,僅僅需要這兩個(gè)js文件鸽斟。
2、基本語法
handlebarsjs 是模塊中的最基本的單元威始,使用時(shí)用兩個(gè)花括號(hào){{ }} 包裹致扯。eg:{{ value }} ,handlebars模塊會(huì)自動(dòng)匹配相應(yīng)的數(shù)值肤寝,對象或者是函數(shù)。
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
也可以單獨(dú)建立一個(gè)模板抖僵,id(或者class)可以用來唯一確定一個(gè)模板鲤看,type是固定寫法,不可或缺耍群。通過<script>標(biāo)簽包裹handlebars表達(dá)式傳遞模板給瀏覽器义桂。
<script id="tpl" type="text/x-handlebars-template">
<div class="demo">
<h1>{{title}}</h1>
<p>{{content.title}}</p>
</div>
</script>
3、預(yù)編譯模板
js 中使用handelbars.compile()預(yù)編譯模板 :
//用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);
通過解析context處理handlebars模板獲取HTML內(nèi)容:
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>
4世吨、blocks表達(dá)式
- 表達(dá)式的后面跟一個(gè)
#
表示blocks澡刹; - 通過
{{/表達(dá)式}}
來結(jié)束Blocks; - 如果當(dāng)前表達(dá)式是 數(shù)組則handelbars會(huì)展開數(shù)組耘婚。并將blocks的上下文設(shè)為數(shù)組元素);
<ul>
{{#programme}}
<li>{{language}}</li>
{{/programme}}
</ul>
//對應(yīng)json數(shù)據(jù)
{
programme: [
{language: "JavaScript"},
{language: "HTML"},
{language: "CSS"}
]
}
//渲染后:
<ul>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
5陆赋、Handelbars內(nèi)置表達(dá)式(Block helper)
- each:
利用{{#each name}}來遍歷列表塊的內(nèi)容沐祷,
用this來引用遍歷的元素嚷闭,指數(shù)組里的每一個(gè)元素。 name 是數(shù)組赖临。
<ul>
{{#each name}}
<li>{{this}}</li>
{{/each}}
</ul>
//對應(yīng)json是:
{
name: ["html","css","javascript"]
};
//編譯后:
<ul>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
- if else :
指定條件渲染dom胞锰;
如果 {{ #if list }},即if后的參數(shù)存在兢榨, 則渲染{{ #else }}后面的語句嗅榕;
否則將不會(huì)渲染都dom,將執(zhí)行{{ else }}后的error語句吵聪;
{{#if list}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>{{error}}</p>
{{/if}}
//對應(yīng)的json:
var data = {
info:['HTML5','CSS3',"WebGL"],
"error":"數(shù)據(jù)取出錯(cuò)誤"
}
unless
{{ #unless }}反向的一個(gè)if語句凌那;unless后的參數(shù) 不存在 為false時(shí),渲染dom;with
{{#with}}一般情況下吟逝,Handlebars模板會(huì)在編譯的階段的時(shí)候進(jìn)行context傳遞 和 賦值帽蝶。
使用with的方法,我們可以將context轉(zhuǎn)移到數(shù)據(jù)的一個(gè)section里面(如果你的數(shù)據(jù)包含section)块攒。
這個(gè)方法在操作復(fù)雜的template時(shí)候非常有用励稳。
即:在使用json數(shù)據(jù)較為復(fù)雜時(shí),我們用這種方式來確定模板里填寫的內(nèi)容是json對象的哪一個(gè)部分囱井!
<div class="entry">
<h1>{{title}}</h1>
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</div>
//對應(yīng)json數(shù)據(jù):
{
title: "My first post!",
author: {
firstName: "Charles",
lastName: "Jolley"
}
}
6驹尼、handlebar的注釋(comments)
寫法:
{{! handlebars comments }}
7、handlebar的訪問(path)
可以通過 . 語法訪問子屬性庞呕;
也可以通過 ../ 來訪問父級(jí)屬性新翎。
<h1>{{author.id}}</h1>
{{#with person}}
<h1>{{../company.name}}</h1>
{{/with}}
8、自定義helper
用Handlebars.registerHelper ( )方法來注冊一個(gè)helper
9千扶、handelbars的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" });
10料祠、示例
(1)、each-基本循環(huán)使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars模板運(yùn)用</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="handlebars-v4.0.11.js"></script>
</head>
<body>
<h1>each-基本循環(huán)使用方法</h1>
<!--基礎(chǔ)html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
</body>
</html>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script標(biāo)簽中澎羞,保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->
<!--id可以用來唯一確定一個(gè)模版,type是模版固定的寫法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--進(jìn)行數(shù)據(jù)處理髓绽、html構(gòu)造-->
<script type="text/javascript">
$(document).ready(function() {
//模擬的json對象
var data = {
"student": [
{
"name": "王五",
"sex": "男",
"age": 28
},
{
"name": "李四",
"sex": "女",
"age": 30
},
{
"name": "妞妞",
"sex": "女",
"age": 32
}
]
};
//注冊一個(gè)Handlebars模版,通過id找到某一個(gè)模版妆绞,獲取模版的html框架
//$("#table-template").html()是jquery的語法顺呕。。括饶。
var myTemplate = Handlebars.compile($("#table-template").html());
//將json對象用剛剛注冊的Handlebars模版封裝株茶,得到最終的html,插入到基礎(chǔ)table中图焰。
$('#tableList').html(myTemplate(data));
});
</script>
循環(huán)是Handlebars.js一個(gè)重要特性启盛,#each可以理解成循環(huán)命令,循環(huán)的是json對象中的student屬性。對于每次循環(huán)僵闯,都可以讀出里邊的name卧抗、sex、age屬性鳖粟。
(2)社裆、each-循環(huán)中使用this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars模板運(yùn)用</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="handlebars-v4.0.11.js"></script>
</head>
<body>
<h1>each-循環(huán)中使用this</h1>
<!--基礎(chǔ)html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
</body>
</html>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script標(biāo)簽中,保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->
<!--id可以用來唯一確定一個(gè)模版,type是模版固定的寫法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--進(jìn)行數(shù)據(jù)處理向图、html構(gòu)造-->
<script type="text/javascript">
$(document).ready(function() {
//模擬的json對象
var data = [
{
"name": "張一",
"sex": "男",
"age": 28
},
{
"name": "張二",
"sex": "女",
"age": 30
},
{
"name": "張三",
"sex": "女",
"age": 32
}
];
//注冊一個(gè)Handlebars模版泳秀,通過id找到某一個(gè)模版,獲取模版的html框架
//$("#table-template").html()是jquery的語法榄攀。嗜傅。。
var myTemplate = Handlebars.compile($("#table-template").html());
//將json對象用剛剛注冊的Handlebars模版封裝航攒,得到最終的html磺陡,插入到基礎(chǔ)table中。
$('#tableList').html(myTemplate(data));
});
</script>
用#each this漠畜,表示遍歷當(dāng)前對象!this表示當(dāng)前的上下文币他。
(3)、with-進(jìn)入到某個(gè)屬性(進(jìn)入到某個(gè)上下文環(huán)境)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars模板運(yùn)用</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="handlebars-v4.0.11.js"></script>
</head>
<body>
<h1>with-進(jìn)入到某個(gè)屬性(進(jìn)入到某個(gè)上下文環(huán)境)</h1>
<!--基礎(chǔ)html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>興趣愛好</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
</body>
</html>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script標(biāo)簽中憔狞,保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->
<!--id可以用來唯一確定一個(gè)模版,type是模版固定的寫法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
<td>
{{#with favorite}}
{{#each this}}
<p>{{name}}</p>
{{/each}}
{{/with}}
</td>
</tr>
{{/each}}
</script>
<!--進(jìn)行數(shù)據(jù)處理蝴悉、html構(gòu)造-->
<script type="text/javascript">
$(document).ready(function() {
//模擬的json對象
var data = [
{
"name": "張三豐",
"sex": "男",
"age": 28,
"favorite":
[
{
"name":"唱歌"
},{
"name":"籃球"
}
]
},
{
"name": "李妮妮",
"sex": "女",
"age": 30,
"favorite":
[
{
"name":"上網(wǎng)"
},
{
"name":"足球"
}
]
},
{
"name": "王妞妞",
"sex": "女",
"age": 18,
"favorite":
[
{
"name":"電影"
}, {
"name": "旅游"
}
]
}
];
//注冊一個(gè)Handlebars模版,通過id找到某一個(gè)模版瘾敢,獲取模版的html框架
//$("#table-template").html()是jquery的語法拍冠。。簇抵。
var myTemplate = Handlebars.compile($("#table-template").html());
//將json對象用剛剛注冊的Handlebars模版封裝庆杜,得到最終的html,插入到基礎(chǔ)table中碟摆。
$('#tableList').html(myTemplate(data));
});
</script>
在循環(huán)每名學(xué)生時(shí)晃财,學(xué)生的favorite屬性并不是一個(gè)普通的字符串,而又是一個(gè)json對象典蜕,確切的說是一個(gè)數(shù)組断盛,我們需要把學(xué)生的愛好全部取出來。
這時(shí)候就需要with命令愉舔,這個(gè)命令可以讓當(dāng)前的上下文進(jìn)入到一個(gè)屬性中钢猛,{{#with favorite}}表示進(jìn)入到favorite屬性的上下文中,而favorite屬性中又是一個(gè)list轩缤,因此可以用{{#each this}}進(jìn)行遍歷命迈,表示遍歷當(dāng)前上下文環(huán)境贩绕,對于每次遍歷。
(4)躺翻、if-判斷的基本用法+Helper方法
在遍歷student
時(shí)丧叽,由于數(shù)據(jù)缺失卫玖,并不是每一個(gè)學(xué)生都有name
屬性公你,我們不想顯示沒有name
屬性的學(xué)生,這時(shí)就需要if來做判斷假瞬。
{{#if name}}
可以用來判斷當(dāng)前上下文中有沒有name
屬性陕靠,實(shí)際上,它是嘗試去讀取name
屬性脱茉,如果返回的為undefined剪芥、null、""琴许、[]税肪、false
任意一個(gè),都會(huì)導(dǎo)致最終結(jié)果為假榜田。
其實(shí)益兄,在Handlebars
的模板標(biāo)簽中,{{#if condition}}{{/if}}
只能判斷這個(gè)condition
是否為true
和false
箭券,并不能判斷是否等于某個(gè)特定的值净捅。
可以借助Handlebars
的registerHelper
方法來實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars模板運(yùn)用</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="handlebars-v4.0.11.js"></script>
</head>
<body>
<h1>if-判斷的基本用法+Helper方法</h1>
<!--基礎(chǔ)html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tableList"></tbody>
</table>
</body>
</html>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script標(biāo)簽中,保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->
<!--id可以用來唯一確定一個(gè)模版,type是模版固定的寫法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
{{#if name}}
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}
{{/if}}
{{/each}}
</script>
<!--進(jìn)行數(shù)據(jù)處理辩块、html構(gòu)造-->
<script type="text/javascript">
$(document).ready(function() {
//模擬的json對象
var data = {
"student": [
{
"sex": "男",
"age": 18
},
{
"name": "李四",
"sex": "女",
"age": 30
},
{
"name": "妞妞",
"sex": "女",
"age": 32
}
]
};
//注冊一個(gè)Handlebars模版蛔六,通過id找到某一個(gè)模版,獲取模版的html框架
//$("#table-template").html()是jquery的語法废亭。国章。。
var myTemplate = Handlebars.compile($("#table-template").html());
//將json對象用剛剛注冊的Handlebars模版封裝豆村,得到最終的html液兽,插入到基礎(chǔ)table中。
//注冊一個(gè)比較大小的Helper,判斷v1是否大于v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//滿足添加繼續(xù)執(zhí)行
return options.fn(this);
}else{
//不滿足條件執(zhí)行{{else}}部分
return options.inverse(this);
}
});
$('#tableList').html(myTemplate(data));
});
</script>
注:Handlebars.registerHelper
用來定義Helper
你画,它有兩個(gè)參數(shù)抵碟,第一個(gè)參數(shù)是Helper
名稱,第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)坏匪,用來執(zhí)行核心業(yè)務(wù)邏輯拟逮。本例中的函數(shù),有三個(gè)參數(shù)适滓,其中前兩個(gè)參數(shù)是需要比較的兩個(gè)數(shù)敦迄,第三個(gè)參數(shù)是固定的,就叫options
,如果加了該參數(shù)罚屋,就說明這個(gè)Helper
是一個(gè)Block
苦囱,塊級(jí)別的Helper
,有一定的語法結(jié)構(gòu)脾猛,調(diào)用的時(shí)候加#號(hào)撕彤,就像if那樣。
關(guān)于options
的使用猛拴,return options.fn(this);
表示滿足條件繼續(xù)執(zhí)行羹铅,也就是執(zhí)行{{#compare }}
和{{else}}
之間的代碼;return options.inverse(this);
表示不滿足條件愉昆,也就是執(zhí)行{{else}}
和{{/compare}}
之間的代碼职员。