DOT.js 实例

最新推荐文章于 2025-01-20 09:10:19 发布

此生若能得幸福安稳谁又愿颠沛流离

最新推荐文章于 2025-01-20 09:10:19 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： dot.js dot.js 实例 dot.js 新手教程

本文链接：https://blog.youkuaiyun.com/hangzhou2dan/article/details/21739471

js 专栏收录该内容

7 篇文章

订阅专栏

本文将带你深入了解DOT.js，通过实际示例展示其用法，适合新手学习。DOT.js是一种强大的模板引擎，用于生成动态HTML。我们将探讨基本语法、变量绑定、条件语句和循环结构等核心概念，助你快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			font-family: "微软雅黑";
			font-size: 18px;
			line-height: 23px;
			text-align: center;
			width: 485px;
			margin: 0 auto;
		}
		.jishu{
			background: orange;
		}
		.oushu{
			background: yellow;
		}
		table td{
			padding: 5px 44px;
			border: 1px solid #f36;
		}
		thead tr{
			background: #102b6a;
			color: white;
		}
	</style>
</head>
<body>
	<div >
		
	</div>
	<script src="../jquery-1.11.0.min.js"></script>
	<script src="../doT.min.js"></script>

	<!-- 将类型设置为template，标识为doT.JS -->
	<script type="template" id="dotTmpl">
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>入学日期</th>
				</tr>
			</thead>
			<tbody>
			    {{ for(var i=0;i<it.length;i++){	}}	
				<tr {{ if( i%2 == 0){ }}
						class="jishu"
					{{  }else{ }} 
						class="oushu"
					{{ } }}>
					<td>{{=it[i].name}}</td>
					<td>{{=it[i].sex}}</td>
					<td>{{=it[i].date}}</td>
				</tr>
				{{ }	}}
			</tbody>
		</table>
	</script>
	<script>
		// 数据
		var data = [
			{"name":19,"sex":"男","date":"1991年12月21日"},
			{"name":19,"sex":"男","date":"1991年12月21日"},
			{"name":19,"sex":"男","date":"1991年12月21日"},
			{"name":19,"sex":"男","date":"1991年12月21日"},
			{"name":19,"sex":"男","date":"1991年12月21日"}
		]
		// 通过dot.template调用你所写的dot.JS。
		var tmpl = doT.template($("#dotTmpl")[0].text);
		// 将数据扔进templ中。并在DIV中显示出来
		$("div").html(tmpl(data));
	</script>
</body>
</html>

模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。