handlebars學習筆記

時間 2020-06-08

標籤 handlebars 學習筆記简体版

原文原文鏈接

1、基本步驟

1.獲取模板塊的內容 <script>標籤的type 爲text/x-handlebars-templatejavascript

2.handlebars預編譯模板html

3.匹配數據，插入htmljava

2、基本概念

數據裏是字符串就直接顯示，函數直接執行jquery

.運算符json

html轉義要經過{{{}}}才能讓html標籤起做用，否則html標籤就會被編譯成字符串。框架

<div id="wrap"><div>
<script src="handlebars-v3.0.3.js"></script>
<!-- 模板-->
<script id="template" type="text/x-handlebars-template">
        <div>
            <h1>{{{title}}}</h1>
            <div>{{fn}}</div>
            <div>{{data.value}}</div>
        </div>
</script>
<script>
//獲取模板內容
    var sourse = document.getElementById('template').innerHTML,
//預編譯
                template = Handlebars.compile(sourse),

                content = {
                    title:'<a href="javascript:">handlebars</a>',
                    fn:function(){
                        return 'str';
                    },
                    data:{
                        label:'數據',
                        value:[1,2,3]
                    },
                    block:{
                        name:['Tom','Lucy']
                    }
                };var html = template(content);
            document.getElementById('wrap').innerHTML = html;
</script>

3、塊級表達式

{{#表達式}}{{/表達式}}less

<ul>  
{{#programme}}
    <li>{{language}}</li>
{{/programme}}
</ul>
有以下json數據
{
  programme: [
    {language: "JavaScript"},
    {language: "HTML"},
    {language: "CSS"}
  ]
}
編譯結果
<ul>  
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

4、內置塊級表達式

each if else unless函數

each 循環中{{@index}}表示當前的index值（從0開始）this

this 指當前的數據對象spa

5、自定義helper

Handlebars.registerHelper()方法來註冊一個helper

<!DOCTYPE html>
<html>
  <head>
    <META charset=utf-8">
    <title>因爲if功力不足引出的Helper - by 楊元</title>
  </head>
  <body>
    <h1>因爲if功力不足引出的Helper</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性別</th>
          <th>年齡</th>
        </tr>
      </thead>
      <tbody id="tableList"> 
      </tbody>
    </table>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句-->
    <!--id能夠用來惟一肯定一個模版,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>
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模擬的json對象
        var data = {
                    "student": [
                        {
                            "name": "張三",
                            "sex": "0",
                            "age": 23
                        },
                        {
                            "sex": "0",
                            "age": 22
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18
                        }
                    ]
                };
        
        //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
        //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        
        //註冊一個比較大小的Helper,判斷v1是否大於v2
        Handlebars.registerHelper("compare",function(v1,v2,options){
          if(v1>v2){
            //知足添加繼續執行
            return options.fn(this);
          }else{
            //不知足條件執行{{else}}部分
            return options.inverse(this);
          }
        });        
        //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
        $('#tableList').html(myTemplate(data));
      });
    </script>
  </body>
</html>

Handlebars.registerHelper用來定義Helper，它有兩個參數，第一個參數是Helper名稱，第二個參數是一個回調函數，用來執行核心業務邏輯。本例中的函數，有三個參數，其中前兩個參數是須要比較的兩個數，第三個參數是固定的，就叫options，若是加了該參數，就說明這個Helper是一個Block，塊級別的Helper，有必定的語法結構，調用的時候加#號，就像if那樣。

關於options的使用，return options.fn(this);表示知足條件繼續執行，也就是執行{{#compare }}和{{else}}之間的代碼；return options.inverse(this);表示不知足條件，也就是執行{{else}}和{{/compare}}之間的代碼。

options.fn(context)當前數據對象的context

options.inverse 相副作用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>handlebars</title>
</head>
<body>
    <div id="wrap"></div>

    <script src="handlebars-v3.0.3.js"></script>

<script id="template" type="text/x-handlebars-template"> 
<div id="wrap"> 
<h1>{{{title}}}</h1> 
<div>{{fn}}</div>
<div>{{data.value}}</div> 
</div> 
<ul> 
{{#block}} 
{{#each name}}
 <li>{{this}}</li>
 <li>{{@index}}</li> 
{{/each}} 
{{/block}} 
</ul> 
<ul> 
{{#with block}} 
<li>{{name}}</li> 
<li>{{name}}</li> 
{{/with}} 
</ul> 
<ul> 
{{#with block}} 
<li>{{../title}}</li> 
{{/with}} 
</ul>  
{{debug}}
</script> 
<script> 
window.onload = function(){
var sourse = document.getElementById('template').innerHTML, 
template = Handlebars.compile(sourse), 
content = { 
title:'<a href="javascript:">handlebars</a>', 
fn:function(){ return 'str'; }, 
data:{ label:'數據', value:[1,2,3] }, 
block:{ name:['Tom','Lucy'] } 
};

　　　　　　//注意registerHelper的位置 由於沒有options全部是行內塊級表達式 能夠不用# Handlebars.registerHelper('debug',function(){ console.log('------------------'); }); var html = template(content); document.getElementById('wrap').innerHTML = html; } </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。