一个例子涵盖所有:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>include demo</title> <script src="template.js"></script> </head> <body> <div id="content"></div> <div id="tagcontent"></div> <script id="targettemplate" type="text/html"> <h1><%=title%></h1> <%include('list')%> //嵌入子模板,id作为标识 <%include('Tvalue')%> </script> <script id="list" type="text/html"> <ul> <%for(var i=0; i<listItems.length; i++){%> <li>条目内容<%=i+1%> : <%=listItems[i]%></li> <%}%> </ul> </script> <script id="Tvalue" type="text/html"> <p>不转义:<%==trans%> or <%=#trans%></p> <p>默认转义: <%=trans%></p> </script> <script> var data = { title: '嵌入子模板', listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'], trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>' }; var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,' +'如果使用了 id 参数,可以使用template.render(id, data)渲染模板。</h3>' +'使用arttemplate来编写:<%=title%>'; var html = template.render('targettemplate', data); var render = template.compile(logintsorse); //编译一段html代码成模板,render(data)把数据render进去 var compilehtml = render(data); document.getElementById('content').innerHTML = html+compilehtml; </script> <script id="customTag" type="text/html"> <h1><!--[= header]--></h1> <ul> <!--[for(var i=0; i<tag.length; i++){]--> <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li> <!--[}]--> </ul> </script> <script> template.openTag = '<!--['; template.closeTag = ']-->'; var listdata = { header : 'your study list', tag : ['算法导论','linq','c#','jquery','django','python'] }; var resulthtml = template.render ('customTag', listdata); document.getElementById('tagcontent').innerHTML = resulthtml; // </script> </body> </html>