art template前端模板引擎
2016-09-06 11:29
513 查看
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/
这段代码很简洁
主要用的是template方法 渲染HTML
渲染结束得到HTML赋值然后显示,后来查看了一下官方的例子讲解的比较好,只要引入 http://aui.github.io/artTemplate/dist/template.js 即可,代码如下
这段代码很简洁
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>
相关文章推荐
- angularjs 复选框 单选框
- 移动前端中viewport(视口) 转
- 工具学习——webpack 项目打包
- $.cssHooks 扩展 jquery 的属性操作
- 关于jQuery,$(":button") 中的冒号是什么意思?
- 【caffe-Windows】训练自己数据——数据集格式转换
- jQuery效率提升建议
- html5-canvas常用的api介绍
- Jquery各版本下载,附Jquery官网下载方法
- Lifeary 6.2 不能创建 Theme 和 Layout 工程
- IE6\7\8不支持html5新标签
- JS面向对象之原型链
- js队列方法push()、shift()与pop()、unshift()的理解
- JSPatch技术文档
- React-native报错记录贴
- Bootstrap基础
- C#序列化及反序列化Json对象通用类JsonHelper
- JSONArray转换日期报错
- React-Native自定义view显示(原生端)
- JSONP跨域的原理解析(转)