tempo 2.0 學習記錄

最近在做項目時使用了tempo,感覺還不錯,但是發現網上對於tempo 2.0 的介紹比較少,我也是在GitHub才找到了比較完整的使用說明,我也簡單記錄一下自己的使用過程,重新學習一下tempo 2.0 ,

不喜勿噴,喜歡看英文的朋友請移步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數據展示)

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

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-字段名="值"
       <li data-template  data-if-sex="母">{{Name}}</a></li>

Data-has="是否存在的字段"
       <li data-template  data-has="ifBianZhong">{{Name}}</a></li>

Data-src="{{字段名|append '.png'}}"
       <img src="1.gif" data-src="{{Image| append '.png'}}"  />

 

ok.大功告成...如果有理解不對的地方,還請朋友及時提出,此文為個人學習總結,英文較好的朋友可直接移步tempo 2.0 英文說明 .