jTemplate —— 基于jQuery的javascript前台模版引擎
reference: http://blog.csdn.net/lexinquan/article/details/6674102 http://blog.csdn.net/kuyuyingzi/article/details/38351867
jTemplates包含三个预定全局变量,分别是$T、$P、$Q。$T为模板提供数据调用功能,$P为模板提供参数变量调用功能,$Q.version提供当前jTemplate的版本
下面介绍将会用到这些功能。
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签,帮助你处理实现复杂的业务情形。
数据准备:
var data ={ TotalCount:64, Lists:[ {Id:'2001' ,Title:'新闻11',CreateDate:'2011-08-08'}, {Id:'2002' ,Title:'新闻22',CreateDate:'2011-08-08'}, {Id:'2003' ,Title:'新闻33',CreateDate:'2011-08-08'}, {Id:'2004' ,Title:'新闻44',CreateDate:'2011-08-08'}, {Id:'2005' ,Title:'新闻55',CreateDate:'2011-08-08'}, ] }
1、引入库文件
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-jtemplates.js"></script>
2、编写模板
<div id="<span style="color:#FF0000;">result</span>"></div> <div id="templateContainer" style="display:none;"> <table> <tr><td>Id</td><td>标题</td><td>发布时间</td></tr> {#foreach $T.table as row} <tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr> {#/for} </table> </div>
{#if $T=="true"} good {#else} fail {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}
{#foreach}
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
{#foreach $T.table as row} {$T.row.Title} {/for}
b、从第二条记录开始输出:
{#foreach $T.table as row begin=1} {$T.row.Title} {/for}
c、从第二条开始且只取2条
{#foreach $T.table as row begin=1 count=2} {$T.row.Title} {/for}
d、使用step
{#foreach $T.table as row step=2} {$T.row.Title} {/for}
e、使用else
{#foreach $T.table as row step=2} {$T.row.Title} {#else} 无记录 {/for}
例子:
{#for index = 1 to 10} {$T.index} {#/for}
{#for index = 1 to 10 step=3} {$T.index} {#/for}
3、渲染模板并展示
<script type="text/javascript"> $(document).ready(function() { // 设置模板 $("#result").setTemplateElement("templateContainer"); // 处理模板 $("#result").processTemplate(data); }); </script>
4、运行结果:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-jtemplates.js"></script> <title>jTemplates</title> <script type="text/javascript"> var data ={ TotalCount:64, Lists:[ {Id:'2001' ,Title:'新闻11',CreateDate:'2011-08-08'}, {Id:'2002' ,Title:'新闻22',CreateDate:'2011-08-08'}, {Id:'2003' ,Title:'新闻33',CreateDate:'2011-08-08'}, {Id:'2004' ,Title:'新闻44',CreateDate:'2011-08-08'}, {Id:'2005' ,Title:'新闻55',CreateDate:'2011-08-08'}, ] }; $(document).ready(function() { // 设置模板 $("#result").setTemplateElement("templateContainer"); // 处理模板 $("#result").processTemplate(data); }); </script> </head> <body> <div id="result"> </div> <textarea id="templateContainer" style="display: none;"> <table border="1"> <tr> <td> Id </td> <td> 标题 </td> <td> 发布时间 </td> </tr> {#foreach $T.Lists as row} <tr> <td> {$T.row.Id} </td> <td> {$T.row.Title} </td> <td> {$T.row.CreateDate} </td> </tr> {#/for} </table> </textarea> </body> </html>
转载于:https://www.cnblogs.com/shy1766IT/p/4478187.html
jTemplate —— 基于jQuery的javascript前台模版引擎相关推荐
- Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs
目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...
- 【11】 Express安装入门与模版引擎ejs
前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use([p ...
- Play 2.0 用户指南 - 模版引擎 -- 针对Scala开发者
2019独角兽企业重金招聘Python工程师标准>>> 一个基于Scala的类型安全的模版引擎 Play2.0带来了一个全新的真正强大的基于Scala的模版引擎.该引擎的设计灵感源于 ...
- 基于jQuery开发的javascript模板引擎-jTemplates
这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件,一个 ...
- jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可 转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
- 出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需 ...
- ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
- php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果,想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果 想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 恭喜187****5204获得1000RBM 恭喜1 ...
最新文章
- Sublime Text使用教程【转】
- pytorch 语义分割loss_Recall Loss:用于不平衡图像分类和语义分割的召回损失
- 如何用python批量下载数据_使用Python批量下载数据
- P5236-[模板]静态仙人掌【tarjan,LCA】
- windows 远程执行 cmd 命令的 9 种方法
- python列表内元素求和_在Python中将列表的每个元素与另一个列表的每个元素相乘/相加/相除的有效方法...
- 先对齐再融合,Salesforce Research提出ALBEF,用动量蒸馏进行多模态表示学习!多个下游任务性能SOTA!...
- java页面要素_Web前端入门技术之网页制作三要素
- protues仿真stm32 虚拟终端 数据不显示或者乱码 标准库
- wind python接口手册_接口手册 · wind- Client API 帮助中心 · 看云
- HTML5分级标题,HTML5与CSS3基础教程:创建分级标题_html/css_WEB-ITnose
- matlab绘制椭球ellipsoid函数
- 当前时间转换成日期格式
- HRBUST1151-魔女
- ksql kafka
- App测试之Monkey压力测试
- Towards Spatio-Temporal Aware Traffic Time Series Forecasting
- CAD - 创建块、插入块
- php 实现ppt转动态swf,如何将ppt转换成swf,ppt转swf的软件,ppt转换flash
- android好玩的独立游戏排行榜,安卓独立游戏十大神作:大叔向前冲上榜,第一名画面十分唯美...