模板引擎之hogan.js

時間 2019-11-13

原文原文鏈接

hogan.js 語法簡單，且支持循環數據：

基本語法：

　　1. 標籤能夠嵌套使用css

　　2. {{data}} 轉義的變量，不會渲染html標籤

　　3. {{{data}}} 不轉義的變量，會渲染html標籤，好比接口返回的富文本編輯器的內容

　　4. {{#list}} {{/list}} 列表循環 / 真值判斷,只能循環數組，不能循環字符串

　　5. {{^list}} {{/list}} 空列表 / 非真值判斷

　　6. {{.}} 枚舉的當前元素 //通常都是枚舉數組，不能枚舉字符串html

　　7. {{!}} 我是註釋jquery

注意事項：

　　　　 1. hogan.js 如需作接口數據的邏輯處理，能夠先用jqery循環再用hogan去渲染 git

　　　　　例如：一個數組Arr包括6個對象，若是隻渲染Arr的話 1. 能夠直接將 Arr丟給 hogan去渲染，2. 也能夠將Arr用jquery循環後獲得每個對象再丟給hogan去渲染；如需取到數組中每個對象的id，而後根據這個id去作其餘的操做，只能用第2種方法，由於第1種方法很差保存循環出來的每一項的id，第2種方法能夠保存，因此應該先用jqery去循環數組Arr，獲得每個對象後再用hogan去渲染AA()函數，獲得每個對象的id再去作其餘操做; 　　　　　　es6

　　　　　　　　　　$(Arr).each(function (key,val) { 　　　　　　　　 　　　　//數據渲染 　　　　　　　　　　　　 AA(val); 用hogan去渲染 　　　　　　　　　　　　//其餘操做 　　　　　　　　　　　　BB(val.id); 用hogan去渲染 　　　　　　　　　　 })

　　　　　2. 接口是對象形式 {"aa": bb} ,能夠直接取到 aagithub

　　　　　3. 接口是兩層或兩層以上的數據循環把接口數據當作標籤循環ajax

　　　　　4. 接口是數組形式 [aa,bb], 用枚舉 {{.}} 取到 json

　　　　　5. 能夠給對象添加一個字段/屬性再用hogan渲染出來 obj.aa= bb;segmentfault

　　　　　6. hogan自己支持es6模板字符串，以下所示，可是在先後端不完全分離的狀況下極可能會與後端的模板引擎衝突$，致使可使用``,不能使用$,此時注意：寫在html文件中會衝突，單獨寫在js文件中不會衝突，因此建議把邏輯寫在單獨的js文件。後端

　　　　　　`{{#listaa}} 　　　　　<ul>
        　　　　<div>我叫{{name}}，code=${code}</div>
   　　　　　</ul> 　　　　　{{/listaa}}`;

參考文檔：http://www.imooc.com/article/18493 https://segmentfault.com/a/1190000011401896

github地址：https://github.com/twitter/hogan.js 官網：https://twitter.github.io/hogan.js/

亦可引用BootCDN：BootCDN

1、實際項目中的用法以下：

實際項目中的用法：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>

<script>

    // 取接口數據
    $.ajax({
        url: "1.json",
        //type: "post",
        dataType: "json",
        data: {
            //"appUserId": appUserId,
            //"courseId": courseId
        },
        success: function (response) {
            console.log(response);
            var data = response.data;
            console.log(data);
            // 渲染數據
            bind(data);
        }
    })
    // 渲染數據
    function bind(data) {
        var tpl =
            `{{#listaa}}
                <ul>
                    <div>我叫{{name}}，我今年{{age}}歲，我喜歡吃{{food}}</div>
                    {{#videoList}}
                    <li>{{fileName}}</li>
                    {{/videoList}}

                    {{!註釋: 指定渲染的數據對象後，下面的數據均可以直接用 標籤名=數據名，好比此處的videoList}}
                </ul>
            {{/listaa}}`;
        var result = Hogan.compile(tpl).render({
            //指定渲染的數據對象，指定渲染的數據對象後，下面的數據均可以直接用 標籤名=數據名
            listaa: data
        });
        // 最後添加到指定標籤
        $('.box').append(result);
    }

</script>

對應的請求到的 json 數據以下：

{
  "result": true,
  "codeDesc": "獲取視頻成功",
  "code": "1",
  "data": [
    {
      "name": "lily",
      "age": 18,
      "food": "蘋果",
      "videoList": [
        {
          "fileName": "aa"
        }
      ]
    },
    {
      "name": "lucy",
      "age": 20,
      "food": "香蕉",
      "videoList": [
        {
          "fileName": "cc"
        },
        {
          "fileName": "dd"
        }
      ]
    }
  ],
  "msg": "獲取視頻成功"
}

2、詳細使用文檔

　　因爲公司jsp項目中不支持 ` ` 模板字符串的用法（由於${} 的語法和jsp有衝突），因此本人無心中發現有 hogan.js 這個模板引擎，由於它的語法是 {{}}，不會和jsp衝突。


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>

<div id="box">

</div>
<script>
    // 保存接口數據的對象
    var obj = { data: { "list": [], "num": [1,2,3], "isme": true,//true顯示 不顯示包括：false、null、undefined、0
　　　　　　　"msg":"信息",

 }, onload: function () { // 定義模板
            // 有key的循環
            var tpl = `{{#list}} <div>我叫{{name}}, 今年{{age}}歲, 最愛吃{{food}}</div>
 {{/list}}`;
            var template = Hogan.compile(tpl); var result = template.render({list: this.data.list}); // 沒有key的循環 只能這樣寫 // var tpl = // `{{#list}} // <div>我叫{{.}}</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data.num});

            // 對象型用法 // var tpl = // `{{#list}} // <div>我叫{{msg}}</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data});

            // 布爾型用法 // var tpl = // `{{#list}} // <div>我叫張瑞奇</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data.isme});

            // 最後添加到指定標籤
 $('.box').html(result) } } // 取接口數據
 $.ajax({ url: "${ctxStatic}/z-img/1.json", //type: "post",
 dataType: "json", data: { //"appUserId": appUserId,
            //"courseId": courseId
 }, success: function (response) { console.log(response); var _data = response.data.dataList;//數組
 console.log(_data); // 將取到的數據賦值給obj的data.list
 obj.data.list = _data; console.log(obj.data.list); // 渲染完成
 obj.onload(); // 其餘操做
 } }) </script>

兩層循環（及兩層以上）用法：

1. 兩層循環標準的寫法以下，項目中使用這種寫法：

兩層循環 <script>
    var tab = { data: { "aa": [ { "name": "lily", "age": 18, "food": "蘋果", "videoList": [ { "fileName": "aa", } ] }, { "name": "lucy", "age": 20, "food": "香蕉", "videoList": [ { "fileName": "cc", }, { "fileName": "dd", } ] } ] }, onload: function () { var tpl = `{{#listaa}} <ul>
                    <div>我叫{{name}}，我今年{{age}}歲，我喜歡吃{{food}}</div>
 {{#videoList}} {{!註釋: 指定渲染的數據對象後，下面的數據均可以直接用 標籤名=數據名}} <li>{{fileName}}</li>
 {{/videoList}}
                </ul>
 {{/listaa}}`;
            var template = Hogan.compile(tpl); var result = template.render({ listaa: this.data.aa //指定渲染的數據對象
 }); // 最後添加到指定標籤
 $('.box').append(result); } } // 調用
 tab.onload(); </script>

2. 這種寫法是和jquery相結合的，不推薦此種寫法，建議使用上面的第一種寫法

<script>
    var tab = {
        data: {
            "list": [
                {
                    "name": "lily",
                    "age": 18,
                    "food": "蘋果",
                    "videoList": [
                        {
                            "fileName": "aa",
                        },
                        {
                            "fileName": "bb",
                        }
                    ]
                },
                {
                    "name": "lucy",
                    "age": 20,
                    "food": "香蕉",
                    "videoList": [
                        {
                            "fileName": "cc",
                        },
                        {
                            "fileName": "dd",
                        }
                    ]
                }
            ],
            "num": [1, 2, 3],
            "isme": true,//true顯示 false不顯示
            "msg": "信息",
        },
        onload: function () {
            // 定義模板
            // 兩層循環
            var tpl =
                `<ul>
                    {{#aa}}
                    <div>{{name}}</div>
                    {{/aa}}
                    {{#bb}}
                    <li>{{fileName}}</li>
                    {{/bb}}
                </ul>`;
            var template = Hogan.compile(tpl);
            $(this.data.list).each(function (key,val) {
                //console.log(val);
                var result = template.render({
                    aa: val,
                    bb: val.videoList
                });
                // 最後添加到指定標籤
                $('.box').append(result);
            })
        }
    }
    // 調用
    tab.onload();

</script>

相關標籤/搜索

每日一句

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