您的位置：首页 > 其它

artTemplate子模板和辅助函数详解

2018-03-19 15:21 429 查看

我们知道artTemplate是一个前端模板引擎，可以使我们告别字符串拼接渲染的麻烦。关于这个模板的优点和具体用法我就不一个个解释。我在这里只针对于其中的子模板和辅助函数并用实际代码例子来详细的解释一下。
先看代码和效果图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
#table{width: 1000px;font-size: 14px;color: #313131;text-align: center;}
#table td,th{height: 25px;line-height: 25px;}
</style>
</head>
<body>
<table id="table" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>薪水</th>
<th>兴趣爱好</th>
</tr>
<script type="text/html" id="list-template">
{{each list as item}}
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
<td>{{item.salary | getSalary}}</td>
<td>{{include "childTemplate" item}}</td>
</tr>
{{/each}}
</script>
</table>
</body>


<script id="childTemplate" type="text/html">
{{each interest as item}}
<span>{{item}}</span>
{{/each}}
</script>

<script src="jquery.min.js"></script>
<script src="template.js"></script>
<script>
$(function(){
getList(); //初始化加载数据
});

//定义获取数据函数
function getList(){
var data={
list:[
{id:1,name:"张三",sex:"男",age:41,address:"江西南昌",salary:3000.45,interest:["读书","音乐"]},
{id:2,name:"李四",sex:"女
ac5e
",age:29,address:"广东深圳",salary:2189.6,interest:["足球"]},
{id:3,name:"王五",sex:"男",age:35,address:"浙江杭州",salary:8975.43,interest:["游泳","打游戏","篮球"]},
{id:4,name:"赵六",sex:"男",age:20,address:"湖北武汉",salary:6300,interest:["书法","羽毛球","音乐","兵乓球"]},
{id:5,name:"钱七",sex:"女",age:15,address:"湖南长沙",salary:4500.6,interest:["兵乓球","象棋","篮球"]}
]
};
renderHtml(data);
}

//定义渲染页面函数
function renderHtml(data){
var html=template("list-template",data);
$("#table").append(html);
}

//定义辅助函数转换日期格式
template.helper("getSalary", function (salary) {
return "￥"+parseInt(salary);
});
</script>
</html>

以下为图片解释：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： artTemplate

相关文章推荐

新的分享

章节导航