16 使用jquery-tmpl完成遍历

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，展示结果。
posted @ 2020-03-16 16:03  张力的程序园  阅读(460)  评论(0)    收藏  举报