jQuery-tmpl是一个简单的模板引擎,能够实现动态展示DOM数据。本节将提供一个极简单的jquery-tmpl的demo。
1、操作步骤
- 创建一个文件夹jquery-tmpl-demo
- 在jquery-tmpl-demo文件夹下导入jquery.tmpl.js、jquery-3.2.1.js
- 在jquery-tmpl-demo文件夹下创建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
</head>
<body>
<div id="div_each"></div>
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:{{= user.name}}</div>
{{/each}}
<h4>group</h4>
{{each(j,group) groups}}
{{if j%2==0}}
<div>${j}:${group.name}</div>
{{/if}}
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>
<script type="text/javascript">
var eachData = { users: [{ name: 'ali' }, { name: 'xiaoli'}], groups: [{ name: 'java' }, { name: 'python' }, { name: 'cpp'}], departs: [{ name: '开发'},{ name: '测试'}] };
$("#each").tmpl(eachData).appendTo('#div_each');
</script>
</body>
</html>- 测试
点击index.html，展示结果。