JS模板引擎-腾讯artTemplate 简洁语法例子

Biegral 2018/11/30 4:50:02 2847

转自：http://blog.csdn.net/jiazimo/article/details/39232425

参考：https://github.com/aui/artTemplate  (这里有详细说明, 很重要)

下载后其中自带有例子；下面是自己参照写的。

[html] view plaincopy
  1. <!DOCTYPE HTML >  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>Index</title>  
  6.         <script src="dist/template.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="content"></div>  
  10.         <script id="test" type="text/html">  
  11.             {{if isAdmin}}  
  12.                 <h1>{{title}}</h1>  
  13.                 <ul>  
  14.                     {{each list as value index}}  
  15.                         <li>索引：{{index}}:{{value}}</li>  
  16.                     {{/each}}  
  17.                 </ul>  
  18.             {{/if}}  
  19.         </script>  
  20.         <script>  
  21.             var data = {  
  22.                 title : 'HELLO WORLD',  
  23.                 isAdmin : true,  
  24.                 list : ['新闻','军事','历史','政治']  
  25.             };  
  26.             var html = template('test', data);  
  27.             document.getElementById("content").innerHTML = html;  
  28.         </script>  
  29.         <hr/>no-escape 不转义HTML  
  30.         <div id="div_noescape"></div>  
  31.         <script id="no_escape" type="text/html">  
  32.             <p>不转义：{{#text}}</p>  
  33.             <p>默认转义： {{text}}</p>  
  34.         </script>  
  35.         <script>  
  36.             var data_noEscape = {  
  37.                 text: '<span style="color:#F00">hello world!</span>'  
  38.             };  
  39.             var html_noescape = template("no_escape", data_noEscape);  
  40.             document.getElementById("div_noescape").innerHTML = html_noescape;  
  41.         </script>  
  42.         <hr/> 在javascript中存放模板  
  43.         <div id="div_complie"></div>  
  44.         <script>  
  45.             var source = '<ur>' +  
  46.                 '{{each list}}'+  
  47.                     '<li>索引：{{$index+1}}:{{$value}}</li>'+  
  48.                 '{{/each}}'+  
  49.             '</ul>';  
  50.             var data = {  
  51.                 list : ['电影','电视剧','综艺','音乐']  
  52.             };  
  53.             var render = template.compile(source);  
  54.             var html = render(data);  
  55.             document.getElementById("div_complie").innerHTML = html;  
  56.         </script>  
  57.         <hr/> 嵌入子模板(include)  
  58.         <div id="div_include"></div>  
  59.         <script id="include" type="text/html">  
  60.             {{include 'test'}}            
  61.         </script>  
  62.         <script>  
  63.             document.getElementById("div_include").innerHTML = html;  
  64.         </script>  
  65.         <hr/>辅助方法  
  66.         <script id="helper" type="text/html">  
  67.             {{time | xx:'yyyy年 MM月 dd日 hh:mm:ss'}}  
  68.         </script>  
  69.         <div id="div_helper"></div>  
  70.         <script>  
  71.             /**   
  72.              * 对日期进行格式化，  
  73.              * @param date 要格式化的日期  
  74.              * @param format 进行格式化的模式字符串  
  75.              *     支持的模式字母有：  
  76.              *     y:年,  
  77.              *     M:年中的月份(1-12),  
  78.              *     d:月份中的天(1-31),  
  79.              *     h:小时(0-23),  
  80.              *     m:分(0-59),  
  81.              *     s:秒(0-59),  
  82.              *     S:毫秒(0-999),  
  83.              *     q:季度(1-4)  
  84.              * @return String  
  85.              */  
  86.             function dateFormat(date, format){  
  87.               
  88.                 date = new Date(date);  
  89.                 var map = {  
  90.                     "M": date.getMonth() + 1, //月份   
  91.                     "d": date.getDate(), //日   
  92.                     "h": date.getHours(), //小时   
  93.                     "m": date.getMinutes(), //分   
  94.                     "s": date.getSeconds(), //秒   
  95.                     "q": Math.floor((date.getMonth() + 3) / 3), //季度   
  96.                     "S": date.getMilliseconds() //毫秒   
  97.                 };  
  98.                   
  99.                 format = format.replace(/([yMdhmsqS])+/g, function(all, t){  
  100.                     var v = map[t];  
  101.                     if (v !== undefined) {  
  102.                         if (all.length > 1) {  
  103.                             v = '0' + v;  
  104.                             v = v.substr(v.length - 2);  
  105.                         }  
  106.                         return v;  
  107.                     }  
  108.                     else if (t === 'y') {  
  109.                             return (date.getFullYear() + '').substr(4 - all.length);  
  110.                         }  
  111.                     return all;  
  112.                 });  
  113.                 return format;  
  114.             }  
  115.             var data = {  
  116.                 time: 1408536771253,  
  117.             };  
  118.             template.helper("xx", dateFormat);  
  119.             var html = template('helper', data);  
  120.             document.getElementById('div_helper').innerHTML = html;  
  121. //          document.getElementById("div_helper").innerHTML = dateFormat(new Date());  
  122.         </script>  
  123.     </body>  
  124. </html>  

helper:

[html] view plaincopy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>Index</title>  
  6.         <script src="dist/template.js">  
  7.         </script>  
  8.     </head>  
  9.     <body>  
  10.     <div id="content">  
  11.     </div>  
  12.     <script id="test" type="text/html">  
  13.         {{xx(n)}}  
  14.     </script>  
  15.     <script>  
  16.         template.helper("xx", function(a){  
  17.             return 10 + "--" + a;  
  18.         });  
  19.         var data = {  
  20.             n: 123  
  21.         };  
  22.         var html = template("test", data);  
  23.         document.getElementById("content").innerHTML = html;  
  24.     </script>  
  25.     </div>  
  26. </body>  
  27. </html>  

其中函数参考：http://yaniswang.com/frontend/2013/02/16/dateformat-performance/


本文转载:CSDN博客

阅读排行

分类

归档