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>

 

 

你可能感兴趣的:(template)