js渲染引擎 tempo.js

1.引入tempo.js

<script src="js/tempo.js" type="text/javascript"></script>  

2.准备数据Data(标准的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'}]} ];

3.Tempo.prepare().render()使用方式(需要找到承载数据的容器)

<script language="javascript" type="text/javascript"> $( function (){ Tempo.prepare( '呈现数据的容器ID' ).render(数据源); }); </script>  

4.data-template(html数据展示)

<script type="text/javascript"> $(function () {  var data1 = { 'leonard': 'Leonard Marx', 'adolph': 'Adolph Marx', 'julius': 'Julius Henry Marx', 'milton': 'Milton Marx', 'herbert': 'Herbert Marx' };  var data2 = [{'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':'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.prepare("list1").render(data1);  Tempo.prepare("list2").render(data2);    }); </script> <fieldset>  <legend>简单数据展示</legend>  <ol id="list1">   <li data-template data-from-map>{{value}} - {{key | append '@marx.com'}}</li>  </ol> </fieldset> <fieldset>  <legend>嵌套数据展示</legend>  <ol id="list2">   <li data-template>    {{nickname}} {{name.last}}    <ul>     <li data-template-for="solo_endeavours">{{title}}</li>    </ul>   </li>  </