handlebar的一些用法——我的使用總結

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官網,入門有時候仍是容易的，可是深刻學習須要的時間和經驗。

參考

• Handlebars官網
• Handlebars中文文檔（譯自官方版）