首页 > 代码库 > art template前端模板引擎

art template前端模板引擎

偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/

这段代码很简洁

var html = template(‘detail‘, {data: data.data, shstatus: status});artDialog({    content: ‘<div id="vorder_detail">‘ + html + ‘</div>‘,    lock: true, fixed: 1, resize: 1, title: ‘订单详情‘, top: 100,});

主要用的是template方法 渲染HTML

<script id="detail"  type="text/html">    <div>        <table class="table table-bordered">            <tr>                <td>分销商用户名</td>                <td>{{data.upload_account}}</td>            </tr>            <tr>                <td>淘宝订单号</td>                <td>{{data.taobao_order_id}}</td>            </tr>            <tr>                <td>入网姓名</td>                <td>{{data.realname.realname}}</td>            </tr>            <tr>                <td>入网身份证</td>                <td>{{data.realname.cert_no}}</td>            </tr>            <tr>                <td>收货人姓名</td>                <td>{{data.to_name}}</td>            </tr>            <tr>                <td>订单状态</td>                <td>{{shstatus[data.status]}}</td>            </tr>            <tr>                <td>审核者</td>                <td>{{data.audit_user}}</td>            </tr>            <tr>                <td>审核理由</td>                <td>{{data.reason}}</td>            </tr>            <tr>                <td>审核时间</td>                <td>{{data.audit_time}}</td>            </tr>            <tr>                <td>申请时间</td>                <td>{{data.createtime}}</td>            </tr>        </table>    </div></script>

渲染结束得到HTML赋值然后显示,后来查看了一下官方的例子讲解的比较好,只要引入 http://aui.github.io/artTemplate/dist/template.js 即可,代码如下

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>basic-demo</title><script src="http://aui.github.io/artTemplate/dist/template.js"></script></head><body><div id="content"></div><script id="test" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>    {{each list as value i}}        <li>索引 {{i + 1}} :{{value}}</li>    {{/each}}</ul>{{/if}}</script><script>var data = {    title: 基本例子,    isAdmin: true,    list: [文艺, 博客, 摄影, 电影, 民谣, 旅行, 吉他]};var html = template(test, data);document.getElementById(content).innerHTML = html;</script></body></html>

 

art template前端模板引擎