art-template的使用

        首先先链接一下官网http://aui.github.io/art-template/zh-cn/。

---

        art-template是腾讯开发的一款模板引擎，功能很是实用，故而和大家分享一下。

主要使用步骤：

        1.导入template-web.js(可以在上边的官网里边进行下载)

        2.制作模板

        3.添加模板数据

        4.模板添加到HTML中

假如说我们拿到的对象是下面的这种格式

var obj = {
            mylist: list,
            str: 'good morning',
            info: {
                msg: '明天有大暴雨'
            }
        };

var list = [{
            name: 'A',
            sex: 'boy',
            age: 15
        }, {
            name: 'B',
            sex: 'gril',
            age: 19
        }, {
            name: 'C',
            sex: 'gril',
            age: 16
        }, {
            name: 'D',
            sex: 'boy',
            age: 17
        },]

对模板的使用如下 通过{{each myList}}对obj中的数组进行遍历，obj中的其他值可以直接使用{{键名}}。

<script type="text/html" id="tpl">
         <div>
            <ul>
                {{ each mylist }}
                <li class={{$value.age <18 ?'bgc':''}}> {{$value.name}} ------{{$value.age<18?'未成年':'成年'}} 索引:{{$index}}</li>
                {{/each}}
            </ul>
            <h2>{{str}}</h2>
            <h3 class="bgc">{{info.msg}}</h3>

        </div>
    </script>

最后得到的

<div>
            <ul>
                
                <li class="bgc"> A ------未成年 索引:0</li>
                
                <li class=""> B ------成年 索引:1</li>
                
                <li class="bgc"> C ------未成年 索引:2</li>
                
                <li class="bgc"> D ------未成年 索引:3</li>
                
            </ul>
            <h2>good morning</h2>
            <h3 class="bgc">明天有大暴雨</h3>

        </div>

同时模板引擎中还可以添加过滤器，格式如下  这是一个对日期进行编辑的过滤器

调用的格式为 | formatDate .