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>
  </