描述：
1.模板字符串
2.模板解析（字符串替换）
3.将第二步返回值显示屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="result"></div>
<script type="template" id="template">
<a href="{{href}}">{{title}}</a>
</script>
<script>
var data = [
{
title: "Knockout应用开发指南",
href: "#",
imgSrc: "#"
},
{
title: "微软ASP.NET站点部署指南",
href: "#",
imgSrc: "#"
},
{
title: "HTML5学习笔记简明版",
href: "#",
imgSrc: "#"
}
];
var result = document.querySelector('.result'),
for ( let i = 0; i < data.length; i++ ) {
var fragment = '';
fragment += template
.replace( /{{title}}/, data[i].title )
.replace( /{{href}}/, data[i].href )
.replace( /{{imgSrc}}/, data[i].imgSrc );
}
result.innerHTML = fragment;
</script>
</body>
</html>
http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html
效果图：
更多详细模板：http://handlebarsjs.com/
例二:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html><html><head> <title>Template</title></head><body><div id="results"></div><script type="text/html" id="user_tmpl"><ul> <% for ( var i = 0; i < users.length; i++ ) { %> <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li> <% } %></ul></script><script>var results = document.getElementById("results");var users=[ {"name":"smile", "url":"http://localhost"}, {"name":"Amy", "url":"http://localhost"}, {"name":"JavaScript", "url":"http://localhost"}];//模板解析function tmpl(id,data){ //data：JSON对象。 var html=document.getElementById(id).innerHTML; var result="var p=[];with(obj){p.push('" +html.replace(/[
]/g," ") .replace(/<%=(.*?)%>/g,"');p.push($1);p.push('") .replace(/<%/g,"');") .replace(/%>/g,"p.push('") +"');}return p.join('');"; var fn=new Function("obj",result); return fn(data);} results.innerHTML = tmpl("user_tmpl", users);</script></body></html> |
https://www.cnblogs.com/dolphinX/p/3489269.html
效果图：
