最近在做项目时使用了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&nbsp;' }}
如果字段非空,添加前缀或者其它字符串 {{ 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 英文说明 .

tempo 2.0 学习记录的更多相关文章

  1. Effective Objective-C 2.0 学习记录

    由于最近入职,公司安排自由学习,于是有时间将Effective Objective-C 2.0一书学习了一遍.由于个人知识面较窄,对于书中有些内容无法理解透彻,现将所学所理解内容做一遍梳理,将个人认为 ...

  2. html5.0学习记录(一)——可拖动视频播放器

    最近自己在重新学习html5新特性,了解到有视频标签和拖动标签,于是自己用这两个特性写了一个小demo,主要功能就是可以通过拖动视频来直接播放.效果图如下: 页面使用了<video>标签和 ...

  3. .net core 2.0学习记录(三):内置IOC与DI的使用

    本篇的话介绍下IOC和ID的含义以及如何使用.Net Core中的DI. 一.我是这么理解IOC和DI的: IOC:没有用IOC之前是直接new实例来赋值,使用IOC之后是通过在运行的时候根据配置来实 ...

  4. webpack4.0学习记录

    2019/04/28 1.本质上,webpack基于node  node跟webpack为最新稳定版,才能更好,更快的打包 安装 1.卸载node  直接在控制面板  卸载 2.安装 从官网下载 然后 ...

  5. .net core 2.0学习记录(四):Middleware使用以及模拟构建Middleware(RequestDelegate)管道

    .net Core中没有继续沿用以前asp.net中的管道事件,而是开发了一个新的管道(Middleware): public class MiddlewareDemo { private reado ...

  6. .net core 2.0学习记录(一):搭建一个.Net Core网站项目

    .Net Core开发可以使用Visual Studio 2017或者Visual Studio Code,下面使用Visual Studio 2017搭建一个.net Core MVC网站项目. 一 ...

  7. Spark2.0学习记录

    Hadoop与Spark的关系: ------------------- Spark 与mapReduce的区别: mapReduce和spark的内存结构: -------------------  ...

  8. Tempo 2.0

    Tempo 2.0 Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data tem ...

  9. Lucene.net(4.8.0) 学习问题记录五: JIEba分词和Lucene的结合,以及对分词器的思考

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

随机推荐

  1. 微信OPENID授权方法

    今天搞了下微信授权, 总结了下微信的授权规则与步骤 先来几个关键字 Openid  微信ip(属于唯一指向公众号的id) redirect_uri  授权回调地址 State 回调地址带参数 Appi ...

  2. SQL Server 内存开销分析

    第一步: 每一类资源用了多少内存. select          clerks.type,         sum(clerks.virtual_memory_reserved_kb) as Res ...

  3. python学习day8

    目录 一.异常 二.多线程 三.守护线程与join 四.GIL与多线程锁 五.递归锁与信号量 六.线程间同步与交互 七.多进程 八.进程间通信与数据共享 九.进程池 一.异常 1.异常处理 在编程过程 ...

  4. C++标准库和标准模板库

    转自原文http://blog.csdn.net/sxhelijian/article/details/7552499 C++强大的功能来源于其丰富的类库及库函数资源.C++标准库的内容总共在50个标 ...

  5. SD卡在单片机上的应用

    (1)SD卡的引脚定义:  SD卡SPI模式下与单片机的连接图: 注意:SPI模式时,这些信号需要在主机端用10~100K欧的电阻上拉.      SD卡支持两种总线方式:SD方式与SPI方式.    ...

  6. mysql perl 抓取update语句

    <pre name="code" class="html"><pre name="code" class="ht ...

  7. (七)boost库之单例类

    (七)boost库之单例类 一.boost.serialzation的单件实现 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一 ...

  8. sqlprofiler 常用调试方法

  9. eclipse下的web开发问题总结[struts2文件上传]

    最近需要做一个web方面的文件上传的Demo.开发工具是eclipse[具体名称:Eclipse IDE for Java EE Developers 版本:2.0.0.20130613-0530]. ...

  10. 使用Web Application Stress Tool 进行压力测试

    1.在测试客户端机器上启动Web Application Stress Tool,在弹出的“建立新脚本”对话框中选择“Record”按钮: 2.在“Record”参数设置第一步中,所有的checkbo ...