下載地址: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>