【Ajax学习】模板引擎

1 渲染Ul结构时遇到的问题

上述代码是通过字符串拼接的形式，来渲染UI结构。
如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦.

2 什么是模板引擎

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

 3 模板引擎的好处

减少了字符串的拼接操作

使代码结构更清晰
使代码更易于阅读与维护

art-template模板引擎

使用步骤：

1、导入art-template

2、定义数据
3、定义模板 模板的结构必须定义到script标签中
4、调用template函数
5、渲染HTML结构

template('模板的id', 需要渲染的数据);

标准语法：

art-template 提供了{{}}这种语法格式，在{{}}内可以进行变量输出，或循环数组等操作，这种{{}}语法在art-template中被称为标准语法。

输出格式：

在{{}}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

原文输出：

如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。

<div id="container"></div>
    <script type="text.html" id="tpl-user">
        <h1>{{name}}   ---------  {{age}}
            {{@test}}
        </h1>
    </script>
    <script>
        var data = {name: 'zs', age: 20, test: '<h3>测试</h3>'};

        //调用template函数
        var htmlStr = template('tpl-user', data);
        console.log(htmlStr);
        $("#container").html(htmlStr)
    </script>

条件输出：

如果要实现条件输出，则可以在{{}}中使用,if ... else if ... /if的方式，进行按需输出。

<div id="container"></div>
    <script type="text.html" id="tpl-user">
        <h1>{{name}}   ---------  {{age}}
            {{@test}}
        </h1>
        <div>
            {{if flag === 0}}
            flag的值为0
            {{else if flag === 1}}
            flag的值为1
            {{/if}}
        </div>
    </script>
    <script>
        var data = {name: 'zs', age: 20, test: '<h3>测试</h3>', flag: 0};

        //调用template函数
        var htmlStr = template('tpl-user', data);
        console.log(htmlStr);
        $("#container").html(htmlStr)
    </script>

循环输出：

如果要实现循环输出，则可以在{(内，通过each 语法循环数组，当前循环的索引使用$index进行访问,当前的循环项使用$value进行访问。

<div id="container"></div>
    <script type="text.html" id="tpl-user">
        <h1>{{name}}   ---------  {{age}}
            {{@test}}
        </h1>
        <div>
            {{if flag === 0}}
            flag的值为0
            {{else if flag === 1}}
            flag的值为1
            {{/if}}
        </div>

        <ul>
            {{each hobby}}
            <li>索引是:{{$index}}, 内容是:{{$value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        var data = {name: 'zs', age: 20, test: '<h3>测试</h3>', flag: 0,
                   hobby: ['吃饭', '睡觉', '写代码']};

        //调用template函数
        var htmlStr = template('tpl-user', data);
        console.log(htmlStr);
        $("#container").html(htmlStr)
    </script>

过滤器

过滤器的本质，就是一个function处理函数。

定义过滤器的基本语法：

注意：记得过滤器函数一定要return！！

<div>{{regTime | dataFormat}}</div>
    </script>
    <script>
        //定义处理时间的过滤器
        template.defaults.imports.dataFormat = function(date){
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            return year + '-' + month + '-' + day;

        }
        var data = {name: 'zs', age: 20, test: '<h3>测试</h3>', flag: 0,
                   hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date()};