artTemplate模板引擎

時間 2019-11-10

標籤 arttemplate 模板引擎简体版

原文原文鏈接

來源：http://blog.csdn.net/joyhen/article/details/21233525

編寫模板

使用一個type="text/html"的script標籤存放模板：html

<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>

模板邏輯語法開始與結束的界定符號爲<% 與%>，若<%後面緊跟=號則輸出變量內容。python

渲染模板

template.render(id, data)jquery

var data = {
    title: '標籤',
    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;

嵌入子模板

<%include(id, [data])%>語句能夠嵌入子模板，其中第二個參數是可選的，它默認傳入當前的數據。git

<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>

  1 編寫模板
  2 
  3 使用一個type="text/html"的script標籤存放模板：
  4 
  5 <script id="test" type="text/html">
  6 <h1><%=title%></h1>
  7 <ul>
  8     <%for(i = 0; i < list.length; i ++) {%>
  9         <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
 10     <%}%>
 11 </ul>
 12 </script>
 13 模板邏輯語法開始與結束的界定符號爲<% 與%>，若<%後面緊跟=號則輸出變量內容。
 14 
 15 渲染模板
 16 
 17 template.render(id, data)
 18 
 19 var data = {
 20     title: '標籤',
 21     list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
 22 };
 23 var html = template.render('test', data);
 24 document.getElementById('content').innerHTML = html;
 25 嵌入子模板
 26 
 27 <%include(id, [data])%>語句能夠嵌入子模板，其中第二個參數是可選的，它默認傳入當前的數據。
 28 
 29 <script id="test" type="text/html">
 30 <h1><%=title%></h1>
 31 <%include('list')%>
 32 </script>
 33 
 34 <script id="list" type="text/html">
 35 <ul>
 36     <%for(i = 0; i < list.length; i ++) {%>
 37         <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
 38     <%}%>
 39 </ul>
 40 </script>
 41 [html] view plain copy 在CODE上查看代碼片派生到個人代碼片
 42 <!doctype html>  
 43 <html>  
 44 <head>  
 45     <meta charset="UTF-8">  
 46     <title>include demo</title>  
 47     <script src="template.js"></script>  
 48 </head>  
 49   
 50 <body>  
 51     <div id="content"></div>  
 52     <div id="tagcontent"></div>  
 53     <script id="targettemplate" type="text/html">  
 54         <h1><%=title%></h1>  
 55         <%include('list')%>  
 56         <%include('Tvalue')%>  
 57     </script>  
 58     <script id="list" type="text/html">  
 59         <ul>  
 60             <%for(var i=0; i<listItems.length; i++){%>  
 61                 <li>條目內容<%=i+1%> : <%=listItems[i]%></li>  
 62             <%}%>  
 63         </ul>       
 64     </script>  
 65     <script id="Tvalue" type="text/html">  
 66         <p>不轉義:<%==trans%> or <%=#trans%></p>  
 67         <p>默認轉義: <%=trans%></p>  
 68     </script>  
 69      
 70     <script>  
 71         var data = {  
 72             title: '嵌入子模板',  
 73             listItems: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'],  
 74             trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'  
 75         };  
 76         var logintsorse='<h3>template.compile([id], source)將返回一個渲染函數。其中 id 參數是可選的，'  
 77         +'若是使用了 id 參數，能夠使用template.render(id, data)渲染模板。</h3>'  
 78         +'使用arttemplate來編寫：<%=title%>';  
 79           
 80         var html = template.render('targettemplate', data);  
 81           
 82         var render = template.compile(logintsorse);  
 83         var compilehtml = render(data);  
 84           
 85         document.getElementById('content').innerHTML = html+compilehtml;          
 86     </script>  
 87       
 88     <script id="customTag" type="text/html">            
 89         <h1><!--[= header]--></h1>  
 90         <ul>  
 91             <!--[for(var i=0; i<tag.length; i++){]-->  
 92                 <li>條目內容<!--[=i+1]--> : <!--[=tag[i]]--></li>  
 93             <!--[}]-->  
 94         </ul>   
 95     </script>  
 96     <script>  
 97         template.openTag = '<!--[';  
 98         template.closeTag = ']-->';  
 99         var listdata = {  
100             header : 'your study list',  
101             tag : ['算法導論','linq','c#','jquery','django','python']  
102         };  
103         var resulthtml = template.render ('customTag', listdata);         
104         document.getElementById('tagcontent').innerHTML = resulthtml;  
105   
106         //  
107     </script>  
108 </body>  
109   
110 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。