Art-Template模板引擎（原生寫法與簡潔寫法）

模板引擎：把js數據轉換成html須要的頁面，這就是模板引擎須要作的事

     • native原生語法

     1. 準備數據

    2. 把數據轉化成html格式的字符串 使用模板引擎 artTemplate 原生語法

        a. 下載原生語法的js文件

        b. 引入在當前頁面

        c. 怎麼使用？

            i. 建立模板 ，在html頁面建立<script type='text/template'></script>

                1. Type必須是text/template或text/html

                2. 寫這個的目的是爲了讓內容不被解析成js執行，當作字符串或html去解釋，不會顯示在頁面中

                3. 給標籤設置一個ID用來作標識

                4. 模板的內容是什麼？內容裏面有沒有特殊語法

                5. 模板引擎是有本身的語法的，原生的語法

                6. 能夠在模板引擎內寫，js語法 <% js語法 %>

                7. 能夠拿到數據 。傳的對象的屬性當作變量使用 {list：data} list是一個變量能夠在模板引擎內使用

                8. 獲取數據顯示出來 <%=屬性名稱 %>

                9. 在模板引擎內不可以使用全局變量。提升性能

                10. 若是想使用全局變量怎麼辦？兩種方式

                11. 第一種：當作數據進行傳遞 {console：console}

                12. 第二種：helper()

                13. = 獲取數據的時候，默認解析出的數據純字符串

                14. =# 符號獲取數據的時候，默認解釋出的是html代碼在瀏覽器是會被執行的<script>alert(0);<\/script>

                15. 能夠導入 其餘模板。Include（’childTemplate‘，{’name‘：’xx‘}）

            ii. 把數據使用在模板中

            iii. 有兩個參數：模板的ID，數據（特殊要求：必須是對象）

            iv. 返回的內容是什麼？是數據轉化成的html格式的字符串

            v. 註冊模板內部能使用的函數 var a=function(){ } {getConsole：function（）{ } }

            vi. 兩個參數，第一個參數：方法的名稱。第二個參數：方法名對應的函數

     3. 渲染

<script type="text/template" id="childTemplate">
    <tr><td colspan="5"><%=name%>我是子模版</td></tr>
</script>
<script type="text/template" id="template">
    <% include('childTemplate',{'name':'xgg'}); %>
    <% var console = getConsole(); %>
    <% console.log('我使用了全局變量'); %>
    <% for(var i = 0 ; i < list.length ; i ++){ %>
    <% var item = list[i]; %>
    <tr>
        <td><%=i+1%></td>
        <td><%=item.username%></td>
        <td><%=item.password%></td>
        <td><%=item.age%></td>
        <td><%=item.sex%></td>
    </tr>
    <% } %>
</script>
<script src="js/jquery.min.js"></script>
<script src="js/template-native.js"></script>
<script>
    /*1.準備數據*/
    var data = [
        {"username":"<span style='color:red'>xgg1</span>","password":"123456","age":18,"sex":"男"},
        {"username":"xgg2","password":"123456","age":18,"sex":"男"},
        {"username":"xgg3","password":"123456","age":18,"sex":"男"}
    ];
    /*2.把數據轉化成html格式的字符串  使用模版引擎 artTemplate  原生語法 */
    /*2.1 下載 https://github.com/aui/art-template  */
    /*2.2 引入在當前頁面 template-native.js 原生語法的js文件*/
    /*2.3 怎麼使用模板引擎*/
    /*2.3.1 建立模版  在html頁面建立 <script type='text/template'><\/script> */
    /*2.3.2 把數據使用在模版當中*/
    /*2.3.3 有兩個參數  第一個參數 模版的ID  第二個參數  數據（特殊要求：必須是對象{}）*/
    /*2.3.4 返回的內容是什麼 是html格式的字符串*/
    /*2.3.5 註冊模版內部能使用的函數  var a = function(){} ｛getConsole:function(){}｝*/
    /*2.3.6 兩個參數  第一個參數  方法的名稱   第二個參數 方法名對應的函數 */
    template.helper('getConsole',function(){
        return console;
    });

    var html = template('template',{list:data});
    /*3.渲染*/
    $('tbody').html(html);
</script>

 

    

     • pithy簡潔語法

一、準備數據

二、把數據轉化成html格式的字符串 使用模板引擎 artTemplate 簡潔語法

    i. 引入js文件

    ii. 準備模板

    iii. 調用解析方法

        a. 簡潔語法的模板 使用簡潔語法

        b. {{ 寫簡潔語法 }}

        c. Each 須要遍歷的數據 默認的 索引和索引對應的值 使用默認變量 $index $value

        d. {{ each model as item i }} 本身指定 索引和對應數據的 變量名稱

        e. {{ if }}

        f. 導入 {{ include 'childTemplate' }}

三、渲染

<!--
1.簡潔語法的模版  使用簡潔的語法
2.{{ 寫簡潔語法 }}
3. each 須要遍歷的數據  默認的  索引和索引對應的數據   使用默認變量 $index  $value
4.  {{each model as item i }}  本身指定 索引和對應數據的 變量名稱
5. {{if}}
6. 導入 {{ include 'childTemplate'}} 注意 最後的地方（}}）不能有空格
-->
<script type="text/template" id="childTemplate">
    <tr><td colspan="5">我是子模版</td></tr>
</script>
<script type="text/template" id="template">

    {{ include 'childTemplate'}}

    {{each model}}
    <tr>
        <td>{{$index+1}}</td>
        <td>{{$value.username}}</td>
        <td>{{$value.password}}</td>
        <td>{{$value.age}}</td>
        <td>{{$value.sex}}</td>
    </tr>
    {{/each}}

    {{each model as item i }}
    <tr>
        <td>{{if i == 2}} <b>0</b>  {{/if}}</td>
        <td>{{item.username}}</td>
        <td>{{item.password}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
    </tr>
    {{/each}}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/template.js"></script>
<script>
    /*1.準備數據*/
    var data = [
        {"username":"xgg1","password":"123456","age":18,"sex":"男"},
        {"username":"xgg2","password":"123456","age":18,"sex":"男"},
        {"username":"xgg3","password":"123456","age":18,"sex":"男"}
    ];
    /*2.把數據轉化成html格式的字符串  使用模版引擎 artTemplate  簡潔語法 */
    /*2.1 引入js文件  template.js 簡介語法的文件*/
    /*2.2 準備模版 */
    /*2.3 調用解析方法*/
    var html = template('template',{model:data});
    /*3.渲染*/
    $('tbody').html(html);
</script>