js模板引擎之 Handlebars 基本用法

時間 2019-11-25

原文原文鏈接

模板引擎比較久遠的一個技術，常見的模板引擎有 baiduTemplate(百度)\artTemplate（騰訊）\juicer（淘寶）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate 等等javascript

本篇簡單介紹一下Handlebars相關經常使用例子：html

Handlebars依賴jq，也能夠寫不依賴的jq的方式。本教程依賴。java

Handlebars官方網站：http://handlebarsjs.com/jquery

例子中有Handlebars的註釋方式、數據循環綁定、if/else 斷定、瀏覽器的調試log、自定義helper、自定義partials。ios

下面這塊代碼是Handlebars的模板代碼：
<script id="table-template-xxxx" type="text/x-handlebars-template">
　　xxxx
</script>

下面代碼是數據源代碼，能夠沒有數據，好比log就能夠沒有數據
var dataxxxxxx = {xxxxxxx}
 
下面的代碼是數據綁定以及頁面html模板渲染的代碼 
var myTemplatexxxxx = Handlebars.compile($("#table-template-xxxxxxxx").html());
$('.xxxxxxxx').html(myTemplatexxxxxxxxxx(dataxxxxxxxx));

下面此處的代碼表示的是模板生成的html插入到頁面何處
<div class="xxxxxxxx"></div>

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>each-基本循環使用方法 - by 楊元</title>
  </head>
  <body>
    <h1>each-基本循環使用方法</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性別</th>
          <th>年齡</th>
        </tr>
      </thead>
      <tbody id="tableList">
        
      </tbody>
    </table>　　<!-- 模板生成完成以後插入的位置 -->
    <div class="if"></div>
    <div class="log"></div>
    <div class="comments"></div>
    <div class="helper"></div>
    <div class="partials"></div>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.min.js"></script>
    <script type="text/javascript" src="script/handlebars.min.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句-->
    <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法-->

    <!-- {{name}} 變量的多種寫法，下面的幾種方式都是當前頁面，當前做用域的變量 -->
    <!-- <p>{{./name}} or {{this/name}} or {{this.name}}</p> -->

    <!-- 循環的寫法 -->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each student}}
        <tr>
          <td>{{name}}</td>
          <td>{{sex}}</td>
          <td>{{age}}</td>
        </tr> 
        {{else}}
          <h1>No content</h1>        
      {{/each}}
    </script>

    <!-- if的寫法 -->
    <script id="table-template-if" type="text/x-handlebars-template">

      <div class="entry">
        {{#if author}}
          <h1>{{firstName}} {{lastName}}</h1>
        {{else}}
          <h1>Unknown Author</h1>
        {{/if}}
      </div>

    </script>    

    <!-- log的寫法 -->
    <script id="table-template-log" type="text/x-handlebars-template">

      {{log "Look at me!"}}

    </script>    

    <!-- comments 的寫法 -->
    <script id="table-template-comments" type="text/x-handlebars-template">

      {{!-- 哇啊哇哇哇 --}}
      {{! 哇啊哇哇哇 }}

    </script>    


    <!-- Helper的寫法 -->
    <script id="table-template-helper" type="text/x-handlebars-template">

      <div class="entry">
        <h1>{{title}}</h1>
        {{#with story}}
          <div class="intro">{{{intro}}}</div>
          <div class="body">{{{body}}}</div>
        {{/with}}
      </div>

    </script>    


    <!-- 建立元素的寫法 -->
    <script id="table-template-partials" type="text/x-handlebars-template">

      <div class="post">
        {{> userMessage tagName="h1" }}

        <h1>Comments</h1>

        {{#each comments}}
          {{> userMessage tagName="h2" }}
        {{/each}}
      </div> 

    </script>       

  
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模擬的json對象
        var data = {
                    "student": [
                        {
                            "name": "張三",
                            "sex": "0",
                            "age": 18
                        },
                        {
                            "name": "李四",
                            "sex": "0",
                            "age": 22
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18
                        }
                    ]
                };

        // if的數據
        var dataif = {
          "author": false,
          "firstName": "mary",
          "lastName": "mei"
        }

        // helper數據
        var datalist = {
            title: "First Post",
            story: {
              intro: "Before the jump",
              body: "After the jump"
            }
          }

        // partials數據
        var partials = {
          author: {firstName: "Alan", lastName: "Johnson"},
          body: "I Love Handlebars",
          comments: [{
            author: {firstName: "Yehuda", lastName: "Katz"},
            body: "Me too!"
          }]
        };
          
        //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
        //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
        $('#tableList').html(myTemplate(data));


        // if綁定的代碼
        var myTemplateIf = Handlebars.compile($("#table-template-if").html());
        $('.if').html(myTemplateIf(dataif));

        // log綁定的代碼，在控制檯輸出
        var myTemplateIf = Handlebars.compile($("#table-template-log").html());
        $('.log').html(myTemplateIf());

        // comments綁定的代碼，註釋代碼
        var myTemplateComments = Handlebars.compile($("#table-template-comments").html());
        $('.comments').html(myTemplateComments());        

        // helper綁定代碼，helper至關於一個自定義function
        var myTemplateList = Handlebars.compile($("#table-template-helper").html());
        Handlebars.registerHelper('with', function(datalist, options) {
          return options.fn(datalist);
        });
        $('.helper').html(myTemplateList(datalist));

        // partials 綁定代碼
        var myTemplatePartials = Handlebars.compile($("#table-template-partials").html());
        Handlebars.registerPartial('userMessage',
            '<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>'
            + '<div class="body">{{body}}</div>');
        $('.partials').html(myTemplatePartials(partials));


      });
    </script>
  </body>
</html>