handlebar的一些用法
概述與介紹
- Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構建Web模板。它采用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯， 這樣可以保證模板加載和運行的速度。
- 簡單的說就是：Handlebars是一個很好的前后端的分離的方案
使用
Handlebars的安裝是比較簡單和方便的;handlebars是一個純JS庫，因此你可以像使用其他JS腳本一樣用script標簽來包含handlebars.js
<script src="jquery.min.js"></script>
<script type="text/javascript" src=".js/handlebars.js"></script>
基本
將對象數據渲染到頁面上
- js代碼
//用jquery獲取模板
var tpl = $("#tpl").html();
//預編譯模板
var template = Handlebars.compile(tpl);
//模擬json數據
var context = { name: "XXX", content: "this is Handlebars"};
//匹配json內容
var aaa = template(context);
//輸入模板
$("#wrap").html(aaa);
- 模板結構
<script id="tpl" type="text/x-handlebars-template">
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
</script>
Handlebar的表達式
block
有時候當你需要對某條表達式進行更深入的操作時，Blocks就派上用場了，在Handlebars中，你可以在表達式后面跟隨一個#號來表示Blocks，然后通過{{/表達式}}來結束Blocks。 如果當前的表達式是一個數組，則Handlebars會“自動展開數組”，並將Blocks的上下文設為數組中的元素。
<ul>
{{#arr_data}}
<li>{{language}}</li>
{{/arr_data}}
</ul>
以下為json數據
{
arr_data: [
{language: "hello"},
{language: "word"},
{language: "handlebars"}
]
}
上面的代碼會自動匹配arr_data數據並展開數據
if/else AND unless
Handlebars的if判斷只能判斷true和false，沒辦法進行這種a===10的邏輯判斷。
#模板
{{#if isTrue}} <p>isTrue</p> {/if}}
{{#if email}} <p>{{email}}</p> {{else}} <p>is not email</p> {{/if}}
{{#if num}} <p>{{num}}</p> {{/if}}
{{#if data1}} {{else}} <p>沒有這個字段</p> {{/if}}
#json數據
{
isTrue: true,
email: '',
num: '0'
};
#頁面效果
isTrue
is not email
0
沒有這個字段
說明：
- Handlebars if在判斷前會做類型轉換，如''、undefined、null、0、[]等都會被識別為false。不過，上面的例子中的'0'是字符串，所以還是會顯示的。
- if可以判斷是否含有某個字段，如果沒有執行else的內容
- unlesee和if正好相反，當是false的時候執行; 是true的時候執行else里面的內容
with
{{#with}}一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞和賦值。使用with的方法，我們可以將context轉移到數據的一個section里面（如果你的數據包含section）。這個方法在操作復雜的template時候非常有用。【簡單的說就是，with可以判斷這幾數據有沒有; 個人感覺和if挺像的】
{{#with author}}
有author就顯示里面的內容，沒有就不顯示
{{/with}}
Handlebar的訪問(PATH)
Handlebar支持路徑訪問,Handlebar還支持嵌套的路徑，使得能夠查找嵌套低於當前上下文的屬性
可以通過.來訪問屬性也可以使用../,來訪問父級屬性。 例如:（使用.訪問的例子）【經常搭配着with一起用的】
#模板
<h1>{{author.id}}</h1>
#json
{
title: "this is title",
author: {
id: 47,
name: "XXX"
},
body: "this is body"
}
遍歷each
遍歷可以算是一個最常用的功能，對於很多數據的展示都是需要用到each的。Handlebar的遍歷對於數組和對象都適用。
#模板
{{#each this}}
<p>{{this.name}}:{{this.age}}</p>
{{else}}
<p>no data</p>
{{/each}}
#json
[
{name: 'aaa', age: 23 },
{name: 'bbb', age: 55 }
]
遍歷的一些小技巧
- @index或者@key都可以獲得序號，但是序號都是從0開始的，如果需要從1開始需要寫一個helper; @key還可獲得對象的索引值
- @first和@last可以判斷是否是數組的第一個或者最后一個。
Html轉義
有時候，后台傳來的一篇文章是富文本內容，而我們想要將其轉換為htnl輸出怎么辦呢？“{{}}”輸出默認轉義Html，幾乎所有的模板引擎輸出默認都是轉義Html的，避免xss攻擊。如果你想避免轉義，請這樣用“{{{}}}”
#模板
<div>{{richText}}</div>
<div>{{{richText}}}</div>
#數據
var data = {
richText: '<div>this is content</div>'
};
Helpers
- 后台傳來的數據往往是需要做處理的，如時間格式化、金額格式化、索引值的開始，甚至一些狀態的操作; 那么這個時候就需要Helper了，這個是Handlebar中最主要的功能，因為它才使得Handlebar那么的好用。
#模板
<p>{{format time}}</p>
#Helpers
Handlebars.registerHelper('format', function (date, options) {
return new Date(date).toLocaleString();
});
#數據
{"time":1450576000281}
- 在Helper里也能做一些判斷，然后在頁面上使用else判斷；
通過return options.fn(this)返回true的結果，
通過return options.inverse(this)返回else要執行的內容
#模板
{{#equal data1 data2}}
<p>兩個數相等</p>
{{else}}
<p>不相等</p>
{{/equal}}
#js
Handlebars.registerHelper("equal",function(v1,v2,options){
if(v1 == v2){
//滿足添加繼續執行
return options.fn(this);
}else{
//不滿足條件執行{{else}}部分
return options.inverse(this);
}
});
- 在Helper里Handlebars.SafeString就是不轉義Html，如果想轉義Html直接return內容即可。
#模板
<p>{{safe}}</p>
#js
Handlebars.registerHelper('safe', function () {
return new Handlebars.SafeString('<div>safe string</div>')
});
Handlebar的注釋
Handlebars也可以使用注釋寫法如下
{{! 單行注釋 }}
{{!-- 多行注釋 --}}
Partials
共享同一個模板內容，有些公共部分希望一次書寫，然后就能重復使用了；類似一些include的功能; 不需要也能調用Helper的方法
#模板
<p>{{> footer}}</p>
#Helper
Handlebars.registerPartial('footer', function () {
return new Handlebars.SafeString('<div>This is footer</div>')
});
其他
Handlebars官網的很多內置的helper以及功能可以參考看一下Handlebars官網,入門有時候還是容易的，但是深入學習需要的時間和經驗。