jTemplates 学习使用笔记

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

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

　　SIMPLE DEMO:　

<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>  

<!-- 模板内容 -->  
<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> 

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

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

　　DEMO2:

　　　　　　

<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>  

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

用户列表 : 编号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 |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 |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 |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 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 |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 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