artTemplate模板引擎
来源：http://blog.csdn.net/joyhen/article/details/21233525
编写模板
使用一个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>
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>
