javascript模板引擎——artTemplate

地址:https://github.com/aui/artTemplate

 https://github.com/aui/artTemplate/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95%E6%89%A9%E5%B1%95%E8%AF%B4%E6%98%8E

编写模板

使用一个type="text/html"script标签存放模板:

<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> :<%=list[i]%></li>
    <%}%>
</ul>
</script>

模板逻辑语法开始与结束的界定符号为<% 与%>,若<%后面紧跟=号则输出变量内容。

渲染模板

template.render(id, data)

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;

嵌入子模板

<%include(id, [data])%>语句可以嵌入子模板,其中第二个参数是可选的,它默认传入当前的数据。

<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>

<script id="list" type="text/html">
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> :<%=list[i]%></li>
    <%}%>
</ul>
</script>

[html]  view plain copy
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>include demo</title>  
  6.     <script src="template.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div id="content"></div>  
  11.     <div id="tagcontent"></div>  
  12.     <script id="targettemplate" type="text/html">  
  13.         <h1><%=title%></h1>  
  14.         <%include('list')%>  
  15.         <%include('Tvalue')%>  
  16.     </script>  
  17.     <script id="list" type="text/html">  
  18.         <ul>  
  19.             <%for(var i=0; i<listItems.length; i++){%>  
  20.                 <li>条目内容<%=i+1%> : <%=listItems[i]%></li>  
  21.             <%}%>  
  22.         </ul>       
  23.     </script>  
  24.     <script id="Tvalue" type="text/html">  
  25.         <p>不转义:<%==trans%> or <%=#trans%></p>  
  26.         <p>默认转义: <%=trans%></p>  
  27.     </script>  
  28.      
  29.     <script>  
  30.         var data = {  
  31.             title: '嵌入子模板',  
  32.             listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],  
  33.             trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'  
  34.         };  
  35.         var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,'  
  36.         +'如果使用了 id 参数,可以使用template.render(id, data)渲染模板。</h3>'  
  37.         +'使用arttemplate来编写:<%=title%>';  
  38.           
  39.         var html = template.render('targettemplate', data);  
  40.           
  41.         var render = template.compile(logintsorse);  
  42.         var compilehtml = render(data);  
  43.           
  44.         document.getElementById('content').innerHTML = html+compilehtml;          
  45.     </script>  
  46.       
  47.     <script id="customTag" type="text/html">            
  48.         <h1><!--[= header]--></h1>  
  49.         <ul>  
  50.             <!--[for(var i=0; i<tag.length; i++){]-->  
  51.                 <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>  
  52.             <!--[}]-->  
  53.         </ul>   
  54.     </script>  
  55.     <script>  
  56.         template.openTag = '<!--[';  
  57.         template.closeTag = ']-->';  
  58.         var listdata = {  
  59.             header : 'your study list',  
  60.             tag : ['算法导论','linq','c#','jquery','django','python']  
  61.         };  
  62.         var resulthtml = template.render ('customTag', listdata);         
  63.         document.getElementById('tagcontent').innerHTML = resulthtml;  
  64.   
  65.         //  
  66.     </script>  
  67. </body>  
  68.   
  69. </html>  
javascript模板引擎——artTemplate_第1张图片

更多请见官网...

你可能感兴趣的:(javascript模板引擎——artTemplate)