客户端模板引擎使用步骤

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #ajax

该博客介绍了如何在HTML页面中引入并使用ART-TEMPLATE模板引擎。首先，通过在<head>部分引入模板引擎的库文件，然后定义模板和数据。接着，在JavaScript中调用template函数，将数据和模板结合，最后将生成的HTML插入到页面指定位置。

ART-TEMPLATE官网地址：http://aui.github.io/art-template/zh-cn/

HTML中引入模板引擎并使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 将模板引擎的库文件引入到当前页面 -->
	<script src="/js/template-web.js"></script>
</head>
<body>
	<div id="container"></div>
	<!-- 准备模板-->
	<script type="text/html" id="tpl">
		<h1>{{username}} {{age}}</h1>
	</script>
	<script type="text/javascript">
		//告诉模板引擎将那个数据和那个模板拼接
		//1 模板id  2 数据 对象类型
		var html = template('tpl',{username:'zhangsan', age:30});
		document.getElementById('container').innerHTML = html;
		console.log(html);
	</script>

</body>
</html>