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简洁语法

1、准备数据

2、把数据转化成html格式的字符串 使用模板引擎 artTemplate 简洁语法

    i. 引入js文件

    ii. 准备模板

    iii. 调用解析方法

        a. 简洁语法的模板 使用简洁语法

        b. {{ 写简洁语法 }}

        c. Each 需要遍历的数据 默认的 索引和索引对应的值 使用默认变量 $index $value

        d. {{ each model as item i }} 自己指定 索引和对应数据的 变量名称

        e. {{ if }}

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

3、渲染

<!--
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>