ArtTemplate 使用笔记
新一代 javascript 模板引擎:artTemplate-3.0
下载地址：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>
