JS頁面模版引擎handlebars.js

示例在最后;
官網(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文件鸽斟。

引入.png

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屬性鳖粟。


each.png

(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)前的上下文币他。


1.png

(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>  
with

在循環(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是否為truefalse箭券,并不能判斷是否等于某個(gè)特定的值净捅。
可以借助HandlebarsregisterHelper方法來實(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>  
if

注: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}}之間的代碼职员。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市跛溉,隨后出現(xiàn)的幾起案子焊切,更是在濱河造成了極大的恐慌,老刑警劉巖芳室,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件专肪,死亡現(xiàn)場離奇詭異,居然都是意外死亡渤愁,警方通過查閱死者的電腦和手機(jī)牵祟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抖格,“玉大人诺苹,你說我怎么就攤上這事”⒅簦” “怎么了收奔?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長滓玖。 經(jīng)常有香客問我坪哄,道長,這世上最難降的妖魔是什么势篡? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任翩肌,我火速辦了婚禮,結(jié)果婚禮上禁悠,老公的妹妹穿的比我還像新娘念祭。我一直安慰自己,他們只是感情好碍侦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布粱坤。 她就那樣靜靜地躺著隶糕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪站玄。 梳的紋絲不亂的頭發(fā)上枚驻,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音株旷,去河邊找鬼再登。 笑死,一個(gè)胖子當(dāng)著我的面吹牛灾常,可吹牛的內(nèi)容都是我干的霎冯。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼钞瀑,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了慷荔?” 一聲冷哼從身側(cè)響起雕什,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎显晶,沒想到半個(gè)月后贷岸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡磷雇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年偿警,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唯笙。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡螟蒸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出崩掘,到底是詐尸還是另有隱情七嫌,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布苞慢,位于F島的核電站诵原,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏挽放。R本人自食惡果不足惜绍赛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望辑畦。 院中可真熱鬧吗蚌,春花似錦、人聲如沸航闺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至侮措,卻和暖如春懈叹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背分扎。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國打工澄成, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人畏吓。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓墨状,卻偏偏與公主長得像,于是被迫代替她去往敵國和親菲饼。 傳聞我的和親對象是個(gè)殘疾皇子肾砂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355