模板引擎: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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM