js 模板引擎 -Art Template
一个例子涵盖所有：
<!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>
