handlebar的一些用法
概述與介紹
- Handlebars 是 JavaScript 一個語義模板庫，經過對view和data的分離來快速構建Web模板。它採用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯， 這樣能夠保證模板加載和運行的速度。
- 簡單的說就是：Handlebars是一個很好的先後端的分離的方案
使用
Handlebars的安裝是比較簡單和方便的;handlebars是一個純JS庫，所以你能夠像使用其餘JS腳本同樣用script標籤來包含handlebars.jsjavascript
<script src="jquery.min.js"></script> <script type="text/javascript" src=".js/handlebars.js"></script>
基本
將對象數據渲染到頁面上php
- 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的上下文設爲數組中的元素。css
<ul> {{#arr_data}} <li>{{language}}</li> {{/arr_data}} </ul>
如下爲json數據html
{
arr_data: [ {language: "hello"}, {language: "word"}, {language: "handlebars"} ] }
上面的代碼會自動匹配arr_data數據並展開數據java
if/else AND unless
Handlebars的if判斷只能判斷true和false，沒辦法進行這種a===10的邏輯判斷。jquery
#模板 {{#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 沒有這個字段
說明：django
- 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挺像的】json
{{#with author}} 有author就顯示裏面的內容，沒有就不顯示 {{/with}}
Handlebar的訪問(PATH)
Handlebar支持路徑訪問,Handlebar還支持嵌套的路徑，使得可以查找嵌套低於當前上下文的屬性
能夠經過.來訪問屬性也可使用../,來訪問父級屬性。 例如:（使用.訪問的例子）【常常搭配着with一塊兒用的】segmentfault
#模板 <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官網,入門有時候仍是容易的，可是深刻學習須要的時間和經驗。