模板引擎:ArtTemplate 使用入门和简单的使用

时间:2023-03-09 18:26:51
模板引擎:ArtTemplate 使用入门和简单的使用
下载地址:https://github.com/aui/artTemplate
快速上手请参考:https://github.com/aui/artTemplate

通过阅读artTemplate原文,基本上都会运用了,不再重述。

主要的是如何运用数组

例:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AtrTemplate</title>
6 </head>
7 <body>
8 <div id="content"></div>
9
10 <script src="js/template-native.js"></script>
11 <script id="test" type="text/html">
12
13 <%for( i = 0; i < content.length; i++) {%>
14 <h1><%=content[i].title%></h1>
15 <p>条目内容 : <%=content[i].list%></p>
16 <%}%>
17
18 </script>
19
20 <script>
21
22 var data = {
23 content : [
24 {
25 title: "artTemplate",
26 list: "新一代 javascript 模板引擎",
27 },
28 {
29 title: "特性",
30 list: "性能卓越,执行速度快"
31 }
32 ]
33 };
34 var html = template('test',data);
35
36 document.getElementById("content").innerHTML = html;
37 </script>
38 </body>
39 </html>

深层运用:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AtrTemplate -- 简介</title>
6 </head>
7 <body>
8 <div id="content"></div>
9
10 <script src="js/template-native.js"></script>
11 <script id="listtemp">
12
13 </script>
14 <script id="test" type="text/html">
15
16 <%for( i = 0; i < content.length; i++) {%>
17 <h1><%=content[i].title%></h1>
18 <ul>
19 <%for( j = 0; j < content[i].list.length; j++) {%>
20 <li> <%=content[i].list[j]%></li>
21 <%}%>
22 </ul>
23 <%}%>
24
25 </script>
26
27 <script>
28
29 var data = {
30 content : [
31 {
32 title: "artTemplate",
33 list: ["新一代 javascript 模板引擎"]
34 },
35 {
36 title: "特性",
37 list: [
38 "性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍",
39 "支持运行时调试,可精确定位异常模板所在语句",
40 " 对 NodeJS Express 友好支持",
41 "安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)",
42 " 支持include语句",
43 "可在浏览器端实现按路径加载模板",
44 "支持预编译,可将模板转换成为非常精简的 js 文件",
45 "模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选",
46 "支持所有流行的浏览器"
47 ]
48 }
49 ]
50 };
51 var html = template('test',data);
52
53 document.getElementById("content").innerHTML = html;
54 </script>
55 </body>
56 </html>