最近在做项目时使用了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 事件类型 的值
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 英文说明 .
原文:http://www.cnblogs.com/aaronguo/p/3878430.html