高性能art-template模板引擎的使用

来源：互联网发布：阿里云文件上传js 编辑：程序博客网时间：2024/05/09 04:45

art-template文档：

https://aui.github.io/art-template/docs/syntax.html

引擎js地址：

https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js

例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=GBK">    <meta name="renderer" content="webkit">    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">    <title>数据绑定模板</title>    <style type="text/css">        .liebiao { }        .liebiao span { min-width: 120px; display: inline-block; }    </style></head><body style="">    <div id="exam1"></div>    <script id="test" type="text/html">        {{each $data item i}}        <div style="border-bottom:1px solid #ccc;margin-bottom:10px;padding-bottom:10px;">            <div><b>{{i}} {{ item.capt }}</b></div>            {{each item.childs it j}}            <div class="liebiao" style="margin-left:20px;">                <span>{{j}}{{it.name}}</span>                <span>{{@it.weight}}</span>                {{if it.num<5}}                <span>库存告急</span>                {{else if it.num>=5 && it.num<15}}                <span>库存紧张</span>                {{else if it.num>=15 && it.num<30}}                <span>库存将就</span>                {{else if it.num>=30 && it.num<60}}                <span>库存有货</span>                {{else if it.num>=60}}                <span>库存充足</span>                {{/if}}                      </div>            {{/each}}                    </div>        {{/each}}            </script>    <script type="text/javascript" src="content/js/template-web.js"></script>    <script type="text/javascript">               var list = [                 { capt: '笔记本类', childs: [{ name: '神舟765G', weight: '<b>0.258kg</b>', num: 10 }, { name: '神舟23BX', weight: '2.4kg', num: 50 }, { name: '神舟TX', weight: '2.2kg', num: 125 }] },                 { capt: '手机类', childs: [{ name: '小米1', weight: '0.5kg', num: 4 }, { name: '小米2', weight: '0.3kg', num: 40 }, { name: '小米3', weight: '0.2kg', num: 70 }] },                 { capt: '食品类', childs: [{ name: '口香糖1', weight: '0.01kg', num: 18 }, { name: '口香糖2', weight: '0.02kg', num: 10 }, { name: '口香糖3', weight: '0.04kg', num: 300 }] },                 { capt: '书籍类', childs: [{ name: '《资治通鉴》', weight: '0.5kg', num: 5 }, { name: '《论语》', weight: '0.3kg', num: 68 }, { name: '《中庸》', weight: '0.2kg', num: 39 }] }        ];        //$data表示内置的函数，表示传入模板的数据对象        //{{@it.weight}}用“@变量名称”表示html标签不会被转义，会用于浏览器解析该html并渲染        var html = template('test', list);        document.getElementById('exam1').innerHTML = html;    </script></body></html>

阅读全文

0 0