当前位置: 首页 > 工具软件 > artTemplate > 使用案例 >

artTemplate 模板引擎的使用

朱天逸
2023-12-01

artTemplate
1.是一个简约、超快的模板引擎
 2.常用语法:
 <% 与 %>符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式

模板引擎作用
 1.减少字符串拼接
 2.在模板里面解析json,然后跟 html 内容拼接,性能会更好

一、artTemplate 使用步骤

1.引入模板引擎
2.创建模板
3.将数据跟模块进行绑定
4.在模块里面编写代码解析数据
5.绑定数据和模板之后得到内容
6.将数据内容写到页面上面

        <!-- 1.引入模板的文件 -->
		<script src="template-web.js" type="text/javascript" charset="utf-8"></script>
		<!-- 2.创建模板 -->
		<script id="tem" type="text/html">
			<!-- 3.添加模板的结构 -->
			<% for(let i = 0 ; i < 5 ; i++) { %>
				<li>这是模板中的li<%= i+1 %><%=name %></li> 
			<% } %>
		</script>

<script type="text/javascript">
			// 将模板内的内容添加到box里面
			//template() 方法可以调用模板内容
			//参数1:模板的id
			//参数2:是一个对象型的数据,数据会传给模板,对象中的每个属性名在模板中可以直接当变量使用
			$(".box").html(template("tem",{name:"tom"}))
		</script>

template的第二个参数如果是一个data对象,则应写为{data}

 类似资料: