jTemplates 学习使用笔记
最近需要开发一套网站平台,顺应网络发展的潮流,也是为了程序猿更好的偷懒,使用JQuery的jTemplates模版开发给我们节约了很多时间,也写一篇文章记录下对该技术的学习。知识点在网上都有了,就是理顺下如何运用,变成自己的知识。
jTemplates的官方网站:http://jtemplates.tpython.com
SIMPLE DEMO:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 模板内容 -->
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 输出元素 --> <div id="result1" ></div>
jTemplates的工作方式:1、setTemplate 指定可处理的模版对象 2、processTemplate 对模版化的对象进行数据处理
DEMO2:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
运行代码后,出现如下图所示界面。
用户列表 : 编号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标签,帮助你处理实现复杂的业务情形。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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...}未能执行的时的输出内容。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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变量
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{#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
得即高歌失即休,多愁多恨亦悠悠。今朝有酒今朝醉,明日愁来明日愁