最近在做项目时使用了tempo,感觉还不错,但是发现网上对于tempo 2.0 的介绍比较少,我也是在GitHub才找到了比较完整的使用说明,我也简单记录一下自己的使用过程,重新学习一下tempo 2.0 ,

不喜勿喷,喜欢看英文的朋友请移步 .

 

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数据展示)

     
    
      
简单数据展示
    
      
        
       
{
   {value}} - {
   {key | append '@marx.com'}}
    
      
     
     
    
      
嵌套数据展示
           
      
        
       
            {
    {nickname}} {
    {name.last}}            
        
                
         
{
   {title}}
            
        
        
    
      
     

5.对字段数据格式化

{
    { field | truncate 25[, 'optional_suffix'] }}截取字符串 使用方法：{
    {字段名|truncate 长度}}{
    { field | format[, numberOfDecimals] }}保留小数后的位数 使用方法：{
    {字段名|format 位数}}{
    { field | default 'default value' }}如果字段未定义和值为NULL时显示的默认值 使用方式：{
    {字段名| default '默认值'}}{
    { field | date 'preset or pattern like HH:mm, DD-MM-YYYY'[, 'UTC'] }}日期格式化 使用方式{
    {字段名 | date 'YYYY-MM-DD HH:mm:ss'}}{
    { field | trim }}清除开始和结尾的空格{
    { field | upper }}改变任何小写字符的值为大写。{
    { field | lower }}改变任何小写字符的值为小写。{
    { field | titlecase[, '需要过滤的字符串'] }}对标题进行过滤不显示的字符{
    { field | append '需要添加的字符串' }}如果字段非空，添加后缀和其它字符串{
    { field | prepend 'some prefix ' }}如果字段非空，添加前缀或者其它字符串{
    { field | join 'separator' }}如果此字段是一个数组，则往该数组里添加一个项

6.字段值转义

　　 Tempo.prepare('marx-brothers', {'escape': false}).render(data); 

 

7.template.when(type, handler)

Type 事件类型 的值 

• • TempoEvent.Types.RENDER_STARTING :模板替换开始 
  • TempoEvent.Types.ITEM_RENDER_STARTING :数据项替换开始 
  • TempoEvent.Types.ITEM_RENDER_COMPLETE : 数据项替换完成 
  • TempoEvent.Types.RENDER_COMPLETE :模板替换完成 
  • TempoEvent.Types.BEFORE_CLEAR : 在清理数据之前 
  • TempoEvent.Types.AFTER_CLEAR : 在清理数据之后 

handler (function(){}) 

 

8.加载数据时前后事件的处理,事件注册

1.Tempo.prepare('tweets').when(TempoEvent.Types.RENDER_STARTING, function (event) {        $('#tweets').addClass('loading');    }).when(TempoEvent.Types.RENDER_COMPLETE, function (event) {        $('#tweets').removeClass('loading');    }).render(data);2.template.starting()手动调用开始事件var template = Tempo.prepare('tweets').when(TempoEvent.Types.RENDER_STARTING, function (event) {            $('#tweets').addClass('loading');        }).when(TempoEvent.Types.RENDER_COMPLETE, function (event) {            $('#tweets').removeClass('loading');        });template.starting();$.getJSON(url, function(data) {    template.render(data.results);});3. jQuery  live() 事件$('ol li').live('click', function() {    // Do something with the clicked element    alert(this);});

9.条件选择模板 if....else...

{% if javascript-expression %} ... {% else %} ... {% endif %}   //{% else %} 为可选块

Data-if-字段名="值"       
{
   {Name}}
Data-has="是否存在的字段"       
{
   {Name}}
Data-src="{
   {字段名|append '.png'}}"       

 

ok.大功告成...如果有理解不对的地方,还请朋友及时提出,此文为个人学习总结,英文较好的朋友可直接移步 .