1、jTemplates工作方式

 

1)setTemplateElement:指定可处理的模板对象

2)processTemplate:对模板化的对象进行数据处理

2、语法解析

 

1)jTemplates包含了三个预定义全局变量:$T$P$Q

 

$T:为模板提供数据调用功能

$P:为模板提供参数变量调用功能

$Q:$Q.version提供当前jTemplates的版本

2)jTemplates标签

#if】标签

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

#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

案例1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JTemplates模板测试demo01</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-jtemplates.js"></script>
 
        <script type="text/javascript">
            $(document).ready(function () {
                //初始化JSON数据
                var jsonData = {
                    name : '用户列表',
                    list_id : '070101061',
                    table : [
                        {id: 1, name: '马韶华', age: 22, mail: '616059480@qq.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'}
                    ]
                };
                //附加模板
                $("#result").setTemplateElement("jTemplates");
                //给模板加载数据
                $("#result").processTemplate(jsonData);
            });
 
        </script>
    </head>
 
    <body>
        <!-- 模板内容 -->
        <textarea id="jTemplates" style="display:none">
            <strong>{$T.name} : {$T.list_id}</strong>
            <table border=1>
                <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="result" />
 
    </body>
</html>

案例2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JTemplates模板测试demo02</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-jtemplates.js"></script>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("#CustomersList").setTemplateElement("jTemplates_list");
                $("#CustomersList").setParam("year", "2012");
                $("#CustomersList").processTemplateURL("js/data.json");
 
                $("#CustomerDetails").setTemplateElement("jTemplates_details");
            });
 
            function showDeatils(cust) {
                $("#CustomerDetails").processTemplate(cust);
            }
 
        </script>
    </head>
 
    <body>
        <!-- 模板内容 -->
        <textarea id="jTemplates_list" style="display:none">
            {#template MAIN}
                <table>
                    <tr class="color:{#cycle values=['#ffffff', '#dddddd']}">
                        <td class="header">Details</td>
                        <td class="header">Name</td>
                        <td class="header">Age</td>
                    </tr>
                    {#foreach $T.Customers as Customer}
                        {#include ROW root=$T.Customer}
                    {#/for}
                </table>
            {#/template MAIN}
 
            {#template ROW}
                <tr class="color:{#cycle values=['#ffffff', '#dddddd']}">
                    <td><a href="#" onclick="showDeatils({#var $T})">选择</td>
                    <td>{$T.FirstName} - {$T.LastName}</td>
                    <td>{$P.year} - {$T.Born}</td>
                </tr>
            {#/template ROW}
        </textarea>
 
        <textarea id="jTemplates_details" style="display:none">
            <table>
                <tr><td class="header">First Name</td><td>{$T.FirstName}</td></tr>
                <tr><td class="header">Last Name</td><td>{$T.LastName}</td></tr>
                <tr><td class="header">Born</td><td>{$T.Born}</td></tr>
                <tr><td class="header">E-mail</td><td>{$T.Email.link('mailto:'+$T.Email)}</td></tr>
            </table>
        </textarea>
 
        <!-- Output elements -->
        <div id="CustomersList" class="Content"></div>
        <div id="CustomerDetails" class="Content"></div>
    </body>
</html>

案例3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JTemplates模板测试demo03</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-jtemplates.js"></script>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript">
            $(document).ready(function () {
 
                $.getJSON('js/data.json', function(data) {
                    var Items = data.Items;
                    var Bom = Items[0].BOM; //sample data
                    $("#ItemBOM").setTemplateElement("jTemplates_list");
                    $("#ItemBOM").processTemplate(Bom);
                });
            });
 
        </script>
    </head>
 
    <body>
        <!-- 模板内容 -->
        <textarea id="jTemplates_list" style="display:none">
            {#template MAIN}
                <h3>BOM : {$T.Name}</h3>
                <div>
                    {#include ROW root=$T.Elements}
                </div>
            {#/template MAIN}
 
            {#template ROW}
                <ul>
                    {#foreach $T as entry}
                        <li>{$T.entry.Name} - {$T.entry.Qty}</li>
                        {#if $T.entry.Elements}
                            {#include ROW root=$T.entry.Elements}
                        {#/if}
                    {#/for}
                </ul>
            {#/template ROW}
        </textarea>
 
        <!-- Output elements -->
        <div id="ItemBOM" class="Content"></div>
    </body>
</html>

案例4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JTemplates模板测试demo03</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-jtemplates.js"></script>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript">
            var customers = null;
            var items = null;
            var salesEntry = null;
            $(document).ready(function () {
                $.getJSON("js/data.json", function (data) {
                    customers = data.Customers;
                    items = data.Items;
                    salesEntry = data.SalesEntry;
 
                    $("#customers").setTemplateElement("template_list_customers");
                    $("#customers").processTemplate(customers);
 
                    $("#items").setTemplateElement("template_list_items").processTemplate(items);
                    $("#entries").setTemplateElement("template_list_entries").processTemplate(null);
                });
 
            });
 
            function updateCustomer(customer, index) {
                customers[index].selected = customer.checked;
                updateEntries();
            }
 
            function updateItem(item, index) {
                items[index].selected = item.checked;
                updateEntries();
            }
 
            function updateEntries() {
                var custCacheMap = {};
                var itemCacheMap = {};
 
                for(var i=0; i<customers.length; ++i) {
                    custCacheMap[customers[i].ID] = customers[i];
                }
 
                for(var i=0; i<items.length; ++i) {
                    itemCacheMap[items[i].ID] = items[i];
                }
 
                var entries = $.map(salesEntry, function (e) {
                    var cust = custCacheMap[e.CustomerID];
                    var item = itemCacheMap[e.ItemID];
 
                    if(cust == null || item == null) {
                        return null;
                    }
 
                    if(cust.selected && item.selected) {
                        return [{
                            "CustName": cust.FirstName + ' ' + cust.LastName,
                            "ItemName": item.Name,
                            "Price": e.SalesPrice,
                            "Cost": e.UnitCost
                        }];
                    } else {
                        return null;
                    }
                });
 
                $("#entries").processTemplate(entries);
            }
 
        </script>
    </head>
 
    <body>
        <!-- 模板内容 -->
        <p style="display:none;">
            <textarea id="template_list_customers" rows="0" cols="0">
                <div class="title">Customers</div>
                <table>
                    <tr style="values=['yellow', 'green']}">
                        <td class="header">Choose</td>
                        <td class="header">Name</td>
                    </tr>
                    {#foreach $T as record}
                    <tr style="values=['yellow', 'green']}">
                        <td><input type="checkbox" value="{$T.record.ID}" onclick="updateCustomer(this, {$T.record$index})"></td>
                        <td>{$T.record.FirstName} {$T.record.LastName}</td>
                    </tr>
                    {#/for}
                </table>
            </textarea>
        </p>
 
        <p style="display:none">
            <textarea id="template_list_items" rows="0" cols="0">
                <div class="title">Items</div>
                <table>
                    <tr style="values=['yellow', 'green']}">
                        <td class="header">Choose</td>
                        <td class="header">Name</td>
                    </tr>
                    {#foreach $T as record}
                    <tr style="values=['yellow', 'green']}">
                        <td><input type="checkbox" value="{$T.record.ID}" onclick="updateItem(this, {$T.record$index})"></td>
                        <td>{$T.record.Name}</td>
                    </tr>
                    {#/for}
                </table>
            </textarea>
        </p>
 
        <p style="display:none;">
            <textarea id="template_list_entries" rows="0" cols="0">
                <div class="title">Entries</div>
                <table>
                    <tr>
                        <td class="header">Customer</td>
                        <td class="header">Item</td>
                        <td class="header">Price</td>
                        <td class="header">Cost</td>
                        <td class="header">Profit</td>
                    </tr>
                    {#param name=totalNum value=0}
                    {#foreach $T as record}
                    <tr style="values=['yellow', 'green']}">
                        <td>{$T.record.CustName}</td>
                        <td>{$T.record.ItemName}</td>
                        <td>{$T.record.Price}</td>
                        <td>{$T.record.Cost}</td>
                        <td>{$T.record.Price - $T.record.Cost}</td>
                    </tr>
                    {#param name=totalNum value=$P.totalNum + ($T.record.Price - $T.record.Cost)}
                    <tr>
                        <td class="header"></td>
                        <td class="header"></td>
                        <td class="header"></td>
                        <td class="header">Total:</td>
                        <td class="header">{$P.totalNum}</td>
                    </tr>
                    {#/for}
                </table>
            </textarea>
        </p>
 
        <div id="customers"></div>
        <div id="items"></div>
        <div id="entries"></div>
    </body>
</html>

jTemplates模板学习笔记的更多相关文章

  1. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  2. C++模板学习笔记

    一个有趣的东西:实现一个函数print, 输入一个数组, 输出数组的各个维度长度. eg. ], b[][], c[][][]; print(a); //(2, 4) print(b); //(3, ...

  3. 初步C++类模板学习笔记

    类模板 实现:在上课时间的定义给它的一个或多个参数,这些参数代表了不同的数据类型.                              -->抽象的类. 在调用类模板时, 指定參数, 由编 ...

  4. tornada模板学习笔记

    import tornado.web import tornado.httpserver import tornado.ioloop import tornado.options import os. ...

  5. 《C++ Primer Plus》14.4 类模板 学习笔记

    14.4.1 定义类模板下面以第10章的Stack类为基础来建立模板.原来的类声明如下:typedef unsigned long Item; class Stack{private:    enum ...

  6. bzoj 2618 半平面交模板+学习笔记

    题目大意 给你n个凸多边形,求多边形的交的面积 分析 题意\(=\)给你一堆边,让你求半平面交的面积 做法 半平面交模板 1.定义半平面为向量的左侧 2.将所有向量的起点放到一个中心,以中心参照进行逆 ...

  7. [原创]java WEB学习笔记109:Spring学习---spring对JDBC的支持:使用 JdbcTemplate 查询数据库,简化 JDBC 模板查询,在 JDBC 模板中使用具名参数两种实现

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. Yii框架学习笔记(二)将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

  9. NVelocity模板引擎学习笔记

    NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结

随机推荐

  1. .net core 2.0使用NLog写日志文件

    原文地址:传送门 之前也看了 linezero 大佬写的教程,但是总是没有成功写入日志文件.按照 曲廉卿 的已成功,以下正文: 最近研究了一下NLog的使用方式,简单的入了一下门. 实现的功能,对于不 ...

  2. vue-vuex安装

    npm install vuex --save 然后在package.json文件的 dependencies中就看到有了一个vuex的文件 解释一下 dependencies生产环境它的意思就是上线 ...

  3. Bzoj3197/洛谷3296 [SDOI2013]刺客信条assassin(树的重心+树Hash+树形DP+KM)

    题面 Bzoj 洛谷 题解 (除了代码均摘自喻队的博客,可是他退役了) 首先固定一棵树,枚举另一棵树,显然另一棵树只有与这棵树同构才有可能产生贡献 如果固定的树以重心为根,那么另一棵树最多就只有重心为 ...

  4. Windows下安装Redis服务及安装PHP的Redis扩展

    Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 它通常被称为数据结构服务器,因为值(valu ...

  5. hdu 5692 Snacks(dfs时间戳+线段树)

    Snacks Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  6. BZOJ 4884 [Lydsy2017年5月月赛]太空猫(单调DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4884 [题目大意] 太空猫(SpaceCat)是一款画面精致.玩法有趣的休闲游戏, 你 ...

  7. [CODECHEF]TREECNT2

    题意:一棵带边权的树,边权可单边修改,问初始时和每次修改后有多少条路径$\gcd=1$ 首先考虑用反演求答案,设$f(n)$为路径$\gcd=n$的路径条数,$g(n)$为路径$\gcd$是$n$倍数 ...

  8. 【推导】【凸包】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem D. Drawing Hell

    平面上n个点,两个人交替决策,用线段连接两个点,但不能跨越其他点或者已经存在的线段.不能做的人算输,问你谁赢. 实际上,跟两个人的决策无关,n个点将平面三角剖分,只需要算出有几条边即可. 凸包上如果有 ...

  9. 【数论】nefu119 组合素数

    算组合数中的素因子p的个数,基本同这题 http://www.cnblogs.com/autsky-jadek/p/6592194.html #include<cstdio> using ...

  10. 【最大流】BZOJ1305-[CQOI2009]dance跳舞

    [题目大意] 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢 ...