art-template的使用

1、先引入template.js文件

<script type="text/javascript" src="lib/template-web.js"></script>

2、写模板代码

<script id="other_text" type="text/html">
    <div class="msg_box">
        <h3>
            <span class="nickname lawyer_name"><%=name%></span>
            <span class="msg_time"><%=time%></span>
        </h3>
        <p><%=msg_content%></p>
    </div>
</script>
3、使用模板

function showBox(obj){
    var html = template("other_text",{name:obj.from,time:obj.time,msg_content:obj.data});//使用模板加载数据
    $(".chat_msg").append(imgShow(html));//将加载了数据的模板添加到盒子里去
}

4、aitTemplate语法分为简洁语法和原生语法

4.1简洁语法示例

<script id="test" type="text/html">
    {{if isAdmin}}
    <h1>{{author}}</h1>
    <ul>
        {{each list value i}}
        <li>{{i+1}}:{{value}}</li>
        {{/each}}
    </ul>
    {{/if}}
</script>
<script>
    var data = {
        author: '宫崎骏',
        isAdmin: true,
        list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
</script>

4.2原生语法示例

<script id="template" type="text/html">
    <div>
        <% for(i=0;i<content.length;++i) {%>
        <h1><%=content[i].province%></h1>
        <% for(j=0 ; j<content[i].city.length ; ++j){%>
        <p><%=content[i].city[j]%></p>
        <%}%>
        <%}%>
    </div>
</script>
<script>
    var data={
        content:[
            {province:'四川',city:['成都','绵阳','自贡']},
            {province:'广东',city:['广州','东莞','佛山']},
            {province:'海南',city:['海口','三亚']}
        ]
    };
    var html=template('template',data);
    document.getElementById('area').innerHTML=html
</script>