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> </
转载于:https://www.cnblogs.com/zxf330301/p/5389668.html
js渲染引擎 tempo.js相关推荐
- H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
根据 H5 2D渲染引擎-Pixi.js 渲染器.舞台和精灵的创建,创建精灵(不做其他设置)并添加到渲染器后,精灵默认的位置是在渲染器的左上角(x=0,y=0),大小为原图片大小. 定位 可以通过改变 ...
- 浏览器内核-渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell).浏览器核心--内核分成两部分:渲染引擎和js引擎.由于js引擎越来越独立,内核就倾向于只指渲染引擎. 1 浏览器组成结构 浏览器一般由七个模 ...
- 浏览器渲染引擎和JS引擎简介
一.定义 浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核就倾向于单指渲染引擎. 渲染引擎:是一种对解析HTML.CSS等进行解析并将其显示在页面上的工具. JS引擎:读 ...
- 【前端】浅谈浏览器内核:渲染引擎、JS引擎
浏览器内核是什么? 简而言之,浏览器内核就是把我们编写的代码转换为页面的中控件. 虽然现在大家谈起浏览器内核时,多指代渲染引擎(Rendering engine 或 layout engineer). ...
- js模版引擎handlebars.js实用教程——结束语
返回目录 有了这些功能,[ajax json Handlebars]替代[vo el表达式]不成问题,新时代的曙光已经来临,最佳解决方案在此,您还等什么? 教程到此结束...祝读者学习愉快... 转载 ...
- webGL、webGPU、封装、渲染引擎 three.js、游戏引擎,定位是游戏开发,在前面的渲染引擎基础上,还提供了骨骼动画、物理引擎、AI、GUI 等功能,以及可视化编辑器来设计关卡,支撑大型游戏
https://zhuanlan.zhihu.com/p/162878354 如何选择 WebGL 框架和引擎? 知道得越多,不知道的就更多了 数据可视化Sugar-百度智能云 cloud.ba ...
- 风一样的HTML5 2D渲染引擎Pixi.js——真正意义的跨平台开发工具
摘要:Pixi.js是一款超快的开源HTML5 2D渲染引擎,由于其使用了带有Canvas回调功能的WebGL,开发者不需要了解WebGL便可以感受到硬件加速的强大力量.Pixi.js作为JavaSc ...
- js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需 ...
- js模版引擎handlebars.js实用教程——with-终极this应用
返回目录 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type conten ...
最新文章
- wince注册表结构
- easyui扩展-日期范围选择.
- IPv4地址中的保留和特殊用途地址
- html怎么设置字体的透明度,CSS字体透明度怎么设置?
- 训练GAN,你应该知道的二三事
- 区块链会计案例_区块链会计行业 区块链会计应用案例
- 详解怎么更新win10系统操作方法
- 【搞定算法】蓄水池算法
- 在javascript中使用纯函数处理副作用
- html5作品答辩,HTML5答辩问题总结
- 2009年 奥巴马胜选演说
- 当不小心更改了matlab工具箱的内置函数怎么办?以及matlab指定工具箱卸载
- 川崎机器人总线通信_川崎机器人TCP/IP通信方法及编程过程介绍
- 《PTA——拼题A》之第1012题
- Unity 动作包的使用方法
- MySQL——Java 访问 MySQL 数据库
- 单线激光雷达与多线激光雷达
- (五)arm裸机开发---主频和时钟配置
- 《PNG文件格式》(一)PNG文件概述
- 【强化学习论文合集】三十一.2021智能体和多智能体系统国际联合会议论文(AAMAS2021)
热门文章
- python初学入门————列表
- EPUB文档格式简单总结
- css ul1,CSS 列表样式 ul
- 美团 O2O 供应链系统架构设计解析
- 【已解决】关于win10提示“为了对电脑进行保护,已经阻止此应用”
- linux系统中权限有几种,Linux系统中三种基本权限
- Word插入分页符后设置下一页首行段落间距正常显示
- 通过--amend和rebase修改git commit提交的注释信息
- mysql got signal 11_轻松解决MYSQL错误mysqld got signal 11 ;
- ffmpeg -比特率,帧率和文件大小