版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/monica1_1/article/details/81541367
关于tempo.js官方说明文档:http://www.javascriptoo.com/tempo
一、优点:
1、能够直接在HTML上纯粹的加载数据
2、结构清晰，轻便
二、对比：
template.js引擎是在js中通过引擎渲染数据
tempo.js在页面上纯粹的渲染数据
三、一个demo告诉你怎么用tempo.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script type="text/javascript" src="https://sandbox.runjs.cn/uploads/rs/91/fxinr7bk/tempo.min.js"></script>
<script type="text/javascript" src="https://sandbox.runjs.cn/uploads/rs/91/fxinr7bk/tempo.js"></script>
</head>
<body>
<div class="content">
<h3>1、JSON形式数据:{{filed}}通过这个语法填充数据</h3>
<ol id="marx-brothers1">
<li data-template>{{nickname}} {{name.last}}</li>
</ol>
<!--基本的json数据
1.Chico Marx
-->
<h3>2、如果是数组型数据：var data = [ 'Leonard Marx', 'Adolph Marx', 'Julius Henry Marx', 'Milton Marx', 'Herbert Marx' ];</h3>
<h3>{{.}}通过这个语法迭代填充数据</h3>
<ol id="marx-brothers2">
<li data-template>{{.}}</li>
</ol>
<!-- 获取数组型数据的值
1.Leonard Marx
2.Adolph Marx
3.Julius Henry Marx
4.Milton Marx
5.Herbert Marx
-->
<h3>3、如果不是JSON数据，是数组中数组的形式的数据：var data = [ ['Leonard','Marx'], ['Adolph','Marx'], ['Julius Henry','Marx'], ['Milton','Marx'], ['Herbert','Marx'] ];</h3>
<h3>{{[0]}} {{[1]}}形式通过数组的索引填充数据</h3>
<ol id="marx-brothers3">
<li data-template>{{[0]}} {{[1]}}</li>
</ol>
<h3>4、如果是一个object数组类型数据：var data = {
'leonard': 'Leonard Marx',
'adolph': 'Adolph Marx',
'julius': 'Julius Henry Marx',
'milton': 'Milton Marx',
'herbert': Herbert Marx'
};</h3>
<h3>可以用data-from-map，比如一个key对应一个value来渲染数据</h3>
<ol id="list10">
<li data-template data-from-map>{{value}} - {{key | append '@marx.com'}}</li>
</ol>
<!-- 一个key对应一个value
1.Leonard Marx - [email protected]
2.Adolph Marx - [email protected]
3.Julius Henry Marx - [email protected]
4.Milton Marx - [email protected]
5.Herbert Marx - [email protected]
-->
<h3>5、Values are escaped by default
All values are escaped by default. To disable automatic escaping pass in the 'escape': false parameter:
Tempo.prepare('marx-brothers', {'escape': false}).render(data);
If you disable escaping you can control this at individual value level using the escape and encodeURI filters.</h3>
<ol id="list11">
<li data-template data-from-map>{{value}} - {{key | append '@marx.com'}}</li>
</ol>
<h3>6、如果是嵌入式的数据: var data = [
{
'name': {'first': 'Leonard', 'last': 'Marx'},
'nickname': 'Chico',
'born': 'March 21, 1887',
'actor': true,
'solo_endeavours': [{'title': 'Papa Romani'}]
}]</h3>
<h3>可以用data-template-for="solo_endeavours"形式，solo_endeavours是嵌套外层的名字</h3>
<ol id="marx-brothers4">
<li data-template>
{{nickname}} {{name.last}}
<ul>
<li data-template-for="solo_endeavours">{{title}}</li>
</ul>
</li>
</ol>
<!--
1.Chico Marx
Papa Romani
-->
<h3>7、如果是嵌入式的数据: var data = [
{
'name': {'first': 'Leonard', 'last': 'Marx'},
'nickname': 'Chico',
'born': 'March 21, 1887',
'actor': true,
'solo_endeavours': [{'title': 'Papa Romani'}]
}]</h3>
<h3> 通过_parent获取父级属性值</h3>
<ol id="marx-brothers5">
<ul data-template><!--嵌套在母模板中使用-->
<li data-template-for="solo_endeavours">{{_parent.name.first}} acted in {{title}}</li>
</ul>
</ol>
<!--
Leonard acted in Papa Romani
-->
<h3>8、支持更加复杂的渲染模板数据</h3>
<h3> 通过模板文件渲染数据:Tempo.prepare('marx-brothers', {}, function(template) {
template.render(data);
});
</h3>
<ol id="marx-brothers6">
<li data-template>
<div>{{name.first}} {{name.last}}</div>
<ul>partials
<li data-template-for="solo_endeavours" data-template-file="partials/movie.html"></li>
</ul>
</li>
</ol>
<h3>9、条件模板</h3>
<h3>通过data-if-名 判断展示数据或者data-has判断是否有改成员</h3>
<ul id="marx-brothers7">
<li data-template data-if-nickname="Groucho">{{nickname}} (aka {{name.first}}) was grumpy!</li>
<li data-template data-if-actor>{{name.first}}, nicknamed '<i>{{nickname}} {{name.last}}</i>' was born on
{{born}}
</li>
<!-- Default template -->
<li data-template>{{name.first}} {{name.last}} was not in any movies!</li>
<li data-template data-has="friend">{{friend}}></li>
</ul>
<!--
Leonard, nicknamed 'Chico Marx' was born on March 21, 1887
Adolph, nicknamed 'Harpo Marx' was born on November 23, 1888
Groucho (aka Julius Henry) was grumpy!
Milton Marx was not in any movies!
Herbert, nicknamed 'Zeppo Marx' was born on February 25, 1901
-->
</div>
<script>
//json数据
var data = [
{
'name': {'first': 'Leonard', 'last': 'Marx'},
'nickname': 'Chico',
'born': 'March 21, 1887',
'actor': true,
'solo_endeavours': [{'title': 'Papa Romani'}]
},
{
'name': {'first': 'Adolph', 'last': 'Marx'},
'nickname': 'Harpo',
'born': 'November 23, 1888',
'actor': true,
'solo_endeavours': [{'title': 'Too Many Kisses', 'rating': 'favourite'}, {'title': 'Stage Door Canteen'}]
},
{
'name': {'first': 'Julius Henry', 'last': 'Marx'},
'nickname': 'Groucho',
'born': 'October 2, 1890',
'actor': true,
'solo_endeavours': [{'title': 'Copacabana'}, {
'title': 'Mr. Music',
'rating': 'favourite'
}, {'title': 'Double Dynamite'}]
},
{'name': {'first': 'Milton', 'last': 'Marx'}, 'nickname': 'Gummo', 'born': 'October 23, 1892'},
{
'name': {'first': 'Herbert', 'last': 'Marx'},
'nickname': 'Zeppo',
'born': 'February 25, 1901',
'actor': true,
'solo_endeavours': [{'title': 'A Kiss in the Dark'}]
}
];
/*tempo官网案例数据*/
/*simple array*/
var data3 = [ ['Leonard','Marx'], ['Adolph','Marx'], ['Julius Henry','Marx'], ['Milton','Marx'], ['Herbert','Marx'] ];
var data4 = ['Leonard Marx', 'Adolph Marx', 'Julius Henry Marx', 'Milton Marx', 'Herbert Marx'];
var data5 = {
'leonard': 'Leonard Marx',
'adolph': 'Adolph Marx',
'julius': 'Julius Henry Marx',
'milton': 'Milton Marx',
'herbert': 'Herbert Marx'
};
var data6 = [
{'name':{'first':'Leonard', 'last':'Marx'}, 'nickname':'Chico', 'born':'March 21, 1887', 'actor':true, 'solo_endeavours':[
{'title':'Papa Romani'}
]},
{'name':{'first':'Adolph', 'last':'Marx'}, 'nickname':'Harpo', 'born':'November 23, 1888', 'actor':true, 'solo_endeavours':[
{'title':'Too Many Kisses', 'rating':'favourite'},
{'title':'Stage Door Canteen'}
]},
{'name':{'first':'Julius Henry', 'last':'Marx'}, 'nickname':'Groucho', 'born':'October 2, 1890', 'actor':true, 'solo_endeavours':[
{'title':'Copacabana'},
{'title':'Mr. Music', 'rating':'favourite'},
{'title':'Double Dynamite'}
]},
{'name':{'first':'Milton', 'last':'Marx'}, 'nickname':'Gummo', 'born':'October 23, 1892'},
{'name':{'first':'Herbert', 'last':'Marx'}, 'nickname':'Zeppo', 'born':'February 25, 1901', 'actor':true, 'solo_endeavours':[
{'title':'A Kiss in the Dark'}
]}
];
var data7 = [
{'name': {'first': 'Leonard'}, 'actor': true, 'solo_endeavours': [{'title': 'Papa Romani'}]},
{
'name': {'first': 'Adolph', 'last': 'Marx'},
'nickname': 'Harpo',
'born': 'November 23, 1888',
'actor': true,
'solo_endeavours': [{'title': 'Too Many Kisses', 'rating': 'favourite'}, {'title': 'Stage Door Canteen'}]
},
{
'name': {'first': 'Julius Henry', 'last': 'Marx'},
'nickname': 'Groucho',
'born': 'October 2, 1890',
'actor': true,
'solo_endeavours': [{'title': 'Copacabana'}, {
'title': 'Mr. Music',
'rating': 'favourite'
}, {'title': 'Double Dynamite'}]
},
{'name': {'first': 'Milton', 'last': 'Marx'}, 'nickname': 'Gummo', 'born': 'October 23, 1892'},
];
//处理
window.onload = function () {
/*tempo官网案例*/
Tempo.prepare('marx-brothers1').render(data);//json串
Tempo.prepare('marx-brothers2').render(data4);//数组型数据
Tempo.prepare('marx-brothers3').render(data3);
/*In this case you can iterate all the elements using the data-from-map attribute where the key name can be accessed with {{key}} and the value object via {{value}}:*/
Tempo.prepare('list10').render(data5);
/*All values are escaped by default. To disable automatic escaping pass in the 'escape': false parameter:*/
Tempo.prepare('list11', {'escape': false}).render(data5);
/*多嵌套型数据: Multiple nested templates are supported.*/
Tempo.prepare('marx-brothers4').render(data);
/*嵌套在母模板中使用:You can (recursively) refer to parent objects within a nested template using the _parent variable.*/
Tempo.prepare('marx-brothers5').render(data);
/*通过模板添加*/
Tempo.prepare('marx-brothers6', {}, function(template) {
template.render(data6);
});
/*有条件的*/
Tempo.prepare('marx-brothers7').render(data6);
/*If JavaScript is disabled in the browser the above example would be rendered as*/
Tempo.prepare('marx-brothers8').render(data7);
}
</script>
</body>
</html>在线demo地址：https://runjs.cn/code/4if3t0l2
java交流群：681223095
关注公众号，更多学习内容给予推送，争取每日更新
