基于art-template解释模板引擎的作用

最新推荐文章于 2023-01-03 12:34:09 发布

WLY_Unity_Unreal

最新推荐文章于 2023-01-03 12:34:09 发布

阅读量987

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Wenliuyong/article/details/93486890

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们在开发时,经常会遇到这样的需求:从服务端取到某些数据,以指定的界面展示出来数据中的一些信息.这种情况,我们可以通过js代码动态的创建相关节点并把对应的数据放到节点中.但是当界面比较复杂的时候,这种方式就会显得繁琐而且不容易维护,因此,模板引擎出现了,他可以让我们在正常的html写法的模板中取得js中对应的数据变量,在需要使用的标签中直接把变量嵌套进去.这样就方便很多,下面使用art-template模板引擎举例说明:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<!-- 引入模板引擎 -->
	<script type="text/javascript" src="template-web.js"></script>
	<!-- 声明一个模板 -->
	<script type="text/template" id="userTable">
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				{{each datas}}
					<tr>
						<td>{{$index}}</td>
						<td>{{$value.name}}</td>
						<td>{{$value.gender === 0 ? '女' : '男'}}</td>
						<td>{{$value.age}}</td>
					</tr>
				{{/each}}
			</tbody>
		</table>
	</script>

	<div id="userParent" style="width: 100%; height: 500px;"></div>

	<script type="text/javascript">
		var datas = [
			{
				name: '小李飞刀',
				gender: 1,
				age:20
			},
			{
				name: '小红飞刀',
				gender: 0,
				age:20
			},
			{
				name: '小小李飞刀',
				gender: 1,
				age:10
			},
		];
		//把模板和数据传入引擎中的函数,会把组装后的节点返回
		var userTable = template ('userTable', {datas: datas});
		var userParent = document.getElementById ('userParent');
		userParent.innerHTML = userTable;
	</script>
</body>
</html>

可以看到模板引擎为我们生成的界面: