template.js 數據渲染引擎
template.js是一款JavaScript模板引擎，用來渲染頁面的。
原理：提前將Html代碼放進編寫模板
<script id="tpl" type="text/html"></script>
中，當需要渲染頁面時，在js里這樣調用：
var tpl = document.getElementById('tpl').innerHTML; template(tpl, data});
template.js開始標簽默認為<%，結束標簽默認為%>，顯示數據為<%= i %>。
下面是使用template.js v0.7.1版本的實驗結果：
1、遍歷數組顯示數據：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<ul>
<%for(var i in items){%>
<li>
name:<%=items[i].name%> val:<%=items[i].val%>
</li>
<%}%>
</ul>
</script>
<script src="../template.js"></script>
<script>
var data={
items:[{'name':'名字一','val':'數據一'},
{'name':'名字二','val':'數據二'},
{'name':'名字三','val':'數據三'},
{'name':'名字四','val':'數據四'}
]
}
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
2、模擬子模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬子模版</title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h1>國內新聞</h1>
<%:=newsListTpl({list: list1, tpl: childTpl})%>
<h1>國際新聞</h1>
<%:=newsListTpl({list: list2, tpl: childTpl})%>
</script>
<script id="child-tpl" type="text/html">
<ul>
<% for(i in list){ %>
<li><%=list[i].title%> <%=list[i].desc%></li>
<% } %>
</ul>
</script>
<script src="../template.js"></script>
<script>
var childTpl = template(document.getElementById('child-tpl').innerHTML);
var data={
newsListTpl: childTpl,
list1: [
{title: '國內標題1', desc: '國內描述1'},
{title: '國內標題2', desc: '國內描述2'},
{title: '國內標題3', desc: '國內描述3'},
],
list2: [
{title: '國際標題1', desc: '國際描述1'},
{title: '國際標題2', desc: '國際描述2'},
{title: '國際標題3', desc: '國際描述3'},
],
}
console.log(data);
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
3、子模板里面的子模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬子模版</title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h1>國內新聞</h1>
<%:=listTpl({list: list1, tpl: subChildTpl})%>
<h1>國際新聞</h1>
<%:=listTpl({list: list2, tpl: subChildTpl})%>
</script>
<script id="child-tpl" type="text/html">
<ul>
<% for(i in list){ %>
<%:=tpl(list[i])%>
<% } %>
</ul>
</script>
<script id="sub-child-tpl" type="text/html">
<li>
<%=title%> <%=desc%>
</li>
</script>
<script src="../template.js"></script>
<script>
var childTpl = template(document.getElementById('child-tpl').innerHTML);
var subChildTpl = template(document.getElementById('sub-child-tpl').innerHTML);
var data={
listTpl: childTpl,
newsChildTpl:subChildTpl,
list1: [
{title: '國內標題1', desc: '國內描述1'},
{title: '國內標題2', desc: '國內描述2'},
{title: '國內標題3', desc: '國內描述3'},
],
list2: [
{title: '國際標題1', desc: '國際描述1'},
{title: '國際標題2', desc: '國際描述2'},
{title: '國際標題3', desc: '國際描述3'},
],
}
console.log(data);
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>