<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
模板引擎：以业务逻辑层和表现层的分离为目的，将规定的格式代码的模块转化为业务数据的算法实现
使用模板引擎
1.准备数据
2.下早template-native.js ---原生语法的JS插件
3.引入插件
4.创建模板：在html页面创建一个<script type="text/template" id=""></script>
5.把数据使用在模板当中
有2个参数 template('方法的ID名'，必须时对象{方法名对应的数据})
-->
<!--创建模板-->
<table>
<!--TODO-->
</table>
<script src="lib/jquery/jquery.js"></script>
<script type="text/template" id="template">
<% for (var i = 0; i < list.length;i++){
var item = list[i];
<tr>
<td><%=item.username %></td>
<td><%=item.age %></td>
</tr>
<% } %>
</script>
<script src="lib/artTemplate/template-native.js"></script>
<script>
var data = [
{'username':'xiaoming','age':'18岁'},
{'username':'xiaohong','age':'14岁'},
{'username':'xiangwang','age':'19岁'},
{'username':'xiaogang','age':'21岁'},
{'username':'xiaozhao','age':'17岁'},
];
var html = template('template',{list:data});
console.log(html);
$('table').html(html);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
