最近需要开发一套网站平台,顺应网络发展的潮流,也是为了程序猿更好的偷懒,使用JQuery的jTemplates模版开发给我们节约了很多时间,也写一篇文章记录下对该技术的学习。知识点在网上都有了,就是理顺下如何运用,变成自己的知识。

  jTemplates的官方网站:http://jtemplates.tpython.com

  SIMPLE DEMO: 

View Code

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>  <script type="text/javascript">  $(document).ready(function() {  //初始化JSON数据  var data = {  name: '用户列表',  list_id: '编号89757',  table: [  {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},  {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},  {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  ]  };  // 附上模板  $("#result1").setTemplateElement("template");  // 给模板加载数据  $("#result1").processTemplate(data);  });
</script>  

View Code

<!-- 模板内容 -->
<textarea id="template" style="display:none">  <strong>{$T.name} : {$T.list_id}</strong>  <table>  <tr>  <th>编号</th>  <th>姓名</th>  <th>年龄</th>  <th>邮箱</th>  </tr>
    {#foreach $T.table as record}  <tr>  <td>{$T.record.id}</td>  <td>{$T.record.name}</td>  <td>{$T.record.age}</td>  <td>{$T.record.mail}</td>  </tr>  {#/for}  </table>
</textarea> 

View Code

<!-- 输出元素 -->
<div id="result1" ></div> 

jTemplates的工作方式:1、setTemplate 指定可处理的模版对象 2、processTemplate  对模版化的对象进行数据处理

  DEMO2:

      

新建一个template.html模板对象

<strong>{$T.name} : {$T.list_id}</strong>
<table>  <tr>  <th>编号</th>  <th>姓名</th>  <th>年龄</th>  <th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>  <td>{$T.record.id}</td>  <td>{$T.record.name}</td>  <td>{$T.record.age}</td>  <td>{$T.record.mail}</td>
</tr>
{#/for}
</table>  

新建一个JSON数据文件
通过AJAX方式获取数据,并将数据填充到模板页中

运行代码后,出现如下图所示界面。

用户列表 : 编号89757
编号 姓名 年龄 邮箱
1 Rain 22 cssrain@domain.com
2 皮特 24 cssrain@domain.com
3 卡卡 20 cssrain@domain.com
4 戏戏 26 cssrain@domain.com
5 一揪 25 cssrain@domain.com

语法分析:

   jTemplates包含三个预定全局变量,分别是$T、$P、$Q。$T为模板提供数据调用功能,$P为模板提供参数变量调用功能,$Q.version提供当前jTemplate的版本

  jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签,帮助你处理实现复杂的业务情形。

#if 语法

{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
#if 示例:
{#if $T.hello} hello world. {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

#for 语法

{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}
#for 示例:
默认步长:{#for index = 1 to 10} {$T.index} {#/for}
正向步长:{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环:{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使用变量:{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
说明:{#else}是在{#for...}未能执行的时的输出内容。

#foreach 语法

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
#foreach 示例:
默认:{#foreach $T.table as record} {$T.record.name} {#/for}
指定起始位置:{#foreach $T.table as record begin=1} {$T.record.name} {#/for}
指定起始和循环次数:{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}
指定步长:{#foreach $T.table as record step=2} {$T.record.name} {#/for}
#foreach 内定环境变量:
$index - index of element in table
$iteration - id of iteration (next number begin from 0)
$first - is first iteration?
$last - is last iteration?
$total - total number of iterations
$key - key in object (name of element) (0.6.0+)
$typeof - type of element (0.6.0+)
#foreach 示例所需要的数据:
var data = {
name: 'User list',
list_id: 4,
table: [
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
]
};
(0.7.0+)版以后新增的功能,支持待循环集合用函数代替:
{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
例:
f = function(step) {
if(step > 100) return null; // stop if loop is too long
return "Step " + step;
};$("#result").setTemplate("{#foreach f as funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");
$("#result").processTemplate();
#foreach在每次循环时请求的就是f函数,然后传递参数给f使用,并返回结果给funcValue变量

#cycle 语法

{#cycle values=|ARRAY|}
功能:提供周期性的调用,在循环中实现交替样式功能时可用到
示例:
{#cycle values=[1,2,3,4]}
下面模板在执行循环时,就会周期性的调用#cycle数组中的值,这样就能实现行交替的效果:
<table width=\"200\">
{#foreach $T.table as row}
<tr bgcolor=\"{#cycle values=['#AAAAAA','#CCCCCC']}\">
<td>{$T.row.name.link('mailto:'+$T.row.mail)}</td>
</tr>
{#/for}
</table>

#include 语法

{#include |NAME| [root=|VAR|]}
功能:提供子模板调用
示例:
{#template MAIN}
{* this is comment *}
{$T} {* $T == $T.toSource() *}
<table>
{#foreach $T.table as record}
{#include ROW root=$T.record}
{#/for}
</table>
{#/template MAIN}

{#template ROW}
<tr class="values=['bcEEC','bcCEE']} {#cycle">
<td>{$T.name}</td>
<td>{$T.mail}</td>
</tr>
{#/template ROW}
说明:{#template MAIN} 是指定模板的主要部分,必不可少。
{#template ROW}是定义一个名为“ROW”的子模板。
{#include ROW root=$T.record}是主模板调用“ROW”子模板,并传递参数$T.record

#param 语法

{#param name=|NAME| value=|CODE|}
功能:定义模板内的局部变量参数,使用$P调用。
示例:
$("#result").setTemplate("{#param name=x value=888}{$P.x}");
$("#result").processTemplate();
输出结果:888
示例:
$("#result").setTemplate("{#param name=x value=$P.x+1}{$P.x}");
$("#result").setParam('x', 777);
$("#result").processTemplate();
输出结果:778
示例:
$("#result").setTemplate("<ul>{#foreach $T.table as row}<li>{$P.x} {$T.row.name}</li>{#param name=x value=$P.x+3}{#/for}<ul>");
$("#result").setParam('x', 1);
$("#result").processTemplate(data);
需要数据:
var data = {
name: 'User list',
list_id: 4,
table: [
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
]
};
输出结果:
# 1 Anne
# 4 Amelia
# 7 Polly
# 10 Alice
# 13 Martha

转载于:https://www.cnblogs.com/gotoschool/archive/2013/03/11/2954135.html

jTemplates 学习使用笔记相关推荐

  1. python神经结构二层_《python深度学习》笔记---8.3、神经风格迁移

    <python深度学习>笔记---8.3.神经风格迁移 一.总结 一句话总结: 神经风格迁移是指将参考图像的风格应用于目标图像,同时保留目标图像的内容. 1."神经风格迁移是指将 ...

  2. tensorflow学习函数笔记

    为什么80%的码农都做不了架构师?>>>    [TensorFlow教程资源](https://my.oschina.net/u/3787228/blog/1794868](htt ...

  3. CSDN技术主题月----“深度学习”代码笔记专栏

    from: CSDN技术主题月----"深度学习"代码笔记专栏 2016-09-13 nigelyq 技术专题 Hi,各位用户 CSDN技术主题月代码笔记专栏会每月在CODE博客为 ...

  4. 深度学习-最优化笔记

    深度学习-最优化笔记 作者:杜客 链接:https://zhuanlan.zhihu.com/p/21360434 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 译 ...

  5. 深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening

     深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening 主成分分析与白化是在做深度学习训练时最常见的两种预处理的方法,主成分分析是一种我们用的很多的降维的一种手段,通 ...

  6. 深度学习入门教程UFLDL学习实验笔记一:稀疏自编码器

     深度学习入门教程UFLDL学习实验笔记一:稀疏自编码器 UFLDL即(unsupervised feature learning & deep learning).这是斯坦福网站上的一篇 ...

  7. 学习LOAM笔记——特征点提取与匹配

    学习LOAM笔记--特征点提取与匹配 学习LOAM笔记--特征点提取与匹配 1. 特征点提取 1.1 对激光点按线束分类 1.2 计算激光点曲率 1.3 根据曲率提取特征点 2. 特征点匹配 2.1 ...

  8. 学习MSCKF笔记——后端、状态预测、状态扩增、状态更新

    学习MSCKF笔记--后端.状态预测.状态扩增.状态更新 学习MSCKF笔记--后端.状态预测.状态扩增.状态更新 1. 状态预测 2. 状态扩增 3. 状态更新 学习MSCKF笔记--后端.状态预测 ...

  9. 学习MSCKF笔记——真实状态、标称状态、误差状态

    学习MSCKF笔记--真实状态.标称状态.误差状态 学习MSCKF笔记--真实状态.标称状态.误差状态 1. 连续时间系统 1.1 真实状态运动学公式 1.2 标称状态运动学公式 1.3 误差状态运动 ...

最新文章

  1. 【工具类】加密工具---MD5使用
  2. 大数据十三五规划将出台 激活相关行业万亿产值
  3. mysql中间件面试题_面试题集锦-中间件 - 春哥大魔王的博客的个人空间 - OSCHINA - 中文开源技术交流社区...
  4. mysql--innodb索引原理详解_MYSQL索引机制(InnoDB索引原理详解)
  5. 【数据库基础知识】plsql安装及配置
  6. 全网独家:LINUX登录桌面后,如何自动运行自己的应用程序
  7. 帆软连接数据库的步骤
  8. python与施耐德plc通讯_施耐德PLC两种编程通讯控制实例分享
  9. Bypass功能及原理介绍
  10. 刷魔趣系统与安装google相机
  11. 全网最全的Java岗集合面试题(含答案)
  12. tracert 原理
  13. 为什么说程序员的前三年不要太看重工资水平?
  14. 以漫画的形式描述联邦学习
  15. 来自 Serenity 的 Java 8 的一些使用技巧
  16. 学生Web开发人员练习:电影评论II
  17. 触手可及的人工智能,加速改变生产生活
  18. DDR中bank,die,rank,channel的概念
  19. 安卓手机怎么设置蓝牙耳机弹窗动画_链接2020.3.3其他团无线蓝牙耳机
  20. 安卓 jni 开发 —— Android Studio 打包 so 的坑

热门文章

  1. Tensorflow【实战Google深度学习框架】编程基础小漂亮总结
  2. 加快tensorflow模型预测速度
  3. Python程序设计题解【蓝桥杯官网题库】 DAY5-基础练习
  4. msoffice二级各题题型及其分值
  5. java课程设计图片浏览器_java课程设计图片浏览器
  6. 爱立信总裁表示欧洲网络始终趋于落后,网站推广之下5G发展需加快步伐
  7. 网络营销外包对于搜索引擎策略性调整网络营销外包专员如何解析
  8. 网站“TDK”中的“D”该如何优化内容?有什么作用?
  9. php reactphp wss_workerman的基本用法(示例详解)
  10. python selenium 文件上传_python+selenium 文件上传