<![CDATA[刘新修]]> http://pic1.liuxinxiu.com:80/index.php zh-cn http://pic1.liuxinxiu.com:80/ArtTemplate_List/ <![CDATA[ArtTemplate_List 实例]]> 刘新修 <admin@yourname.com> Tue, 02 Aug 2016 08:56:26 +0000 http://pic1.liuxinxiu.com:80/ArtTemplate_List/ ArtTemplate_List 实例1

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>basic-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="content"></div>  
  11. <script id="test" type="text/html">  
  12. {{if isAdmin}}  
  13.   
  14. <h1>{{title}}</h1>  
  15. <ul>  
  16.     {{each list as value i}}  
  17.         <li>索引 {{i + 1}} ：{{value}}</li>  
  18.     {{/each}}  
  19. </ul>  
  20.   
  21. {{/if}}  
  22. </script>  
  23.   
  24. <script>  
  25. var data = {  
  26.     title: '基本例子',  
  27.     isAdmin: true,  
  28.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
  29. };  
  30. var html = template('test', data);  
  31. document.getElementById('content').innerHTML = html;  
  32. </script>  
  33. </body>  
  34. </html  

ArtTemplate_List 实例2

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>compile-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <h1>在javascript中存放模板</h1>  
  11. <div id="content"></div>  
  12. <script>  
  13. var source = '<ul>'  
  14. +    '{{each list as value i}}'  
  15. +        '<li>索引 {{i + 1}} ：{{value}}</li>'  
  16. +    '{{/each}}'  
  17. + '</ul>';  
  18.   
  19. var render = template.compile(source);  
  20. var html = render({  
  21.     list: ['摄影', '电影', '民谣', '旅行', '吉他']  
  22. });  
  23.   
  24. document.getElementById('content').innerHTML = html;  
  25. </script>  
  26. </body>  
  27. </html>  
XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>basic-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <h1>在javascript中存放模板</h1>    
  11. <div id="content"></div>    
  12. <script>  
  13. /***** 小模版 *****/  
  14. var source=''  
  15. +'<ul>'    
  16. +    '{{each list as value i}}'    
  17. +        '<li>索引 {{i+1}} ：{{value}}</li>'  
  18. +    '{{/each}}'    
  19. +'</ul>';  
  20.   
  21. /***** 定义变关联逻辑代码片段（小模版） *****/    
  22. var connectJs=template.compile(source);  
  23.   
  24. /***** 最终的数据源等于==逻辑代码关联数据 *****/  
  25. var htmlData=connectJs({  
  26.     list: ['摄影', '电影', '民谣', '旅行', '吉他']    
  27. });    
  28.   
  29. /***** 把最终处理后的数据源插入到页面 *****/    
  30. document.getElementById('content').innerHTML=htmlData;    
  31. </script>  
  32. </body>  
  33. </html>  

实例访问地址：http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html

include嵌入子模板:

XML/HTML代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>include-demo</title>  
  6. <script src="../dist/template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="content"></div>  
  11. <script id="test" type="text/html">  
  12. <h1>{{title}}</h1>  
  13. {{include 'list'}}  
  14. </script>  
  15. <script id="list" type="text/html">  
  16. <ul>  
  17.     {{each list as value i}}  
  18.         <li>索引 {{i + 1}} ：{{value}}</li>  
  19.     {{/each}}  
  20. </ul>  
  21. </script>  
  22.   
  23. <script>  
  24. var data = {  
  25.     title: '嵌入子模板',  
  26.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
  27. };  
  28. var html = template('test', data);  
  29. document.getElementById('content').innerHTML = html;  
  30. </script>  
  31. </body>  
  32. </html>  

理解部分（使用普通for循环加声明语法，进行数组遍历）1：

XML/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="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.     // 等同于普通的for循环，在普通的for循环上给每一行语法声明加上<% xx %>  
  19.     // 等同于普通的for循环，在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>  
  20.         //for(i=0;i<content.length;i++){  
  21.         //  <h1><%=content[i].title%></h1>  
  22.         //  <p>条目内容 : <%=content[i].list%></p>  
  23.         //}  
  24.           
  25.     </script>  
  26.   
  27.     <script>  
  28.     /***** 自造数据，content为数组List便于测试循环 *****/  
  29.         var data={  
  30.             content:[  
  31.                 {  
  32.                     title: "artTemplate",  
  33.                     list: "新一代 javascript 模板引擎",  
  34.                 },  
  35.                 {  
  36.                     title: "特性",  
  37.                     list: "性能卓越，执行速度快"  
  38.                 }  
  39.             ]  
  40.         };  
  41.     /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/  
  42.         var html=template('test',data);  
  43.     /***** 选择页面Dom元素，插入处理后的数据 *****/  
  44.         document.getElementById("content").innerHTML=html;  
  45.    </script>  
  46. </body>  
  47. </html>  

理解部分（使用普通for循环加声明语法，进行双层嵌套数组遍历）2：

XML/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.     <script>
  27.         var data={  
  28.             content:[  
  29.                 {  
  30.                     title: "artTemplate",  
  31.                     list:["新一代 javascript 模板引擎"]  
  32.                 },  
  33.                 {  
  34.                     title: "特性",  
  35.                     list: [  
  36.                             "性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",  
  37.                             "支持运行时调试，可精确定位异常模板所在语句",  
  38.                             " 对 NodeJS Express 友好支持",  
  39.                             "安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",  
  40.                             " 支持include语句",  
  41.                             "可在浏览器端实现按路径加载模板",  
  42.                             "支持预编译，可将模板转换成为非常精简的 js 文件",  
  43.                             "模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",  
  44.                             "支持所有流行的浏览器"  
  45.                         ]  
  46.                 }  
  47.             ]  
  48.         };
  49. /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
  50.         var html=template('test',data);
  51.  
  52. /***** 选择页面Dom元素，插入处理后的数据 *****/
  53.         document.getElementById("content").innerHTML=html;  
  54.     </script>  
  55. </body>  
  56. </html>  

 


Tags - ]]> http://pic1.liuxinxiu.com:80/ArtTemplate_List/#blogcomment <![CDATA[[评论] ArtTemplate_List 实例]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://pic1.liuxinxiu.com:80/ArtTemplate_List/#blogcomment