template.js是一款JavaScript模板引擎,用来渲染页面的。
原理:提前将Html代码放进编写模板
<script id="tpl" type="text/html"></script>
中,当需要渲染页面时,在js里这样调用:
var tpl = document.getElementById('tpl').innerHTML; template(tpl, data});
template.js可以使用命令安装,也可以在git上面下载:https://github.com/yanhaijing/template.js
template.js开始标签默认为<%,结束标签默认为%>,显示数据为<%= i %>。
![](https://i-blog.csdnimg.cn/blog_migrate/e592c4e3ba9357f44f6df1a48d300837.png)
下面是使用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>
![](https://i-blog.csdnimg.cn/blog_migrate/5c0161bcb5adda5f059c2b4d1f54463a.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/a090b932253db2ee42c240ecffd543c5.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/ec3ba2e048dfec2ca6225d1e608617c4.png)
4.foreach循环获取数据
<!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>
<%items.forEach(function(item){%>
<li><%=item.name%> <%=item.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>
![](https://i-blog.csdnimg.cn/blog_migrate/c59fdafe15737137aef1fa8c7d50d0ff.png)
5、registerFunction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h5><%=selfFun()%></h5>
<h5><%=selfFun2()%></h5>
</script>
<script src="../template.js"></script>
<script>
template.registerFunction('selfFun', function () {
return '自创函数1'
});
template.registerFunction('selfFun2', function () {
return '自创函数2'
});
var html = template(document.getElementById('tpl').innerHTML,{});
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/d05fc017d6e1095c9b988da9096b8b63.png)
6、registerModifier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h5><%:up='newbie is ace'%></h5>
</script>
<script src="../template.js"></script>
<script>
template.registerModifier('up', function (str) {
return str.toUpperCase();
});
var html = template(document.getElementById('tpl').innerHTML,{});
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>