JQuery-No.02 jTemplates模板学习笔记
2024-04-22 02:55:15
2019独角兽企业重金招聘Python工程师标准>>> 
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="background-color:{#cycle values=['yellow', 'green']}"><td class="header">Choose</td><td class="header">Name</td></tr>{#foreach $T as record}<tr style="background-color:{#cycle 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="background-color:{#cycle values=['yellow', 'green']}"><td class="header">Choose</td><td class="header">Name</td></tr>{#foreach $T as record}<tr style="background-color:{#cycle 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="background-color:{#cycle 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>转载于:https://my.oschina.net/shma1664/blog/316874
JQuery-No.02 jTemplates模板学习笔记相关推荐
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- Mustache模板学习笔记
Mustache模板学习笔记 1 初体验 1.1 还可以对象形式做数据源 1.2 {{#param}}这个标签很强大,有if判断.forEach的功能. 1.2.1 如果迭代的是数组,还可以用{{.} ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的"章节7:创建TPL自定义模板",做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. ...
- C++模板学习笔记——模板实参
对于函数模板,编译器通过隐式推断模板实参.其中,从函数实参来确定模板实参的过程被称为模板实参推断.在模板实参推断过程中,编译器使用函数调用中的实参类型来寻找模板实参,用这些模板实参生成的函数版本与给定 ...
- “模板”学习笔记（7）-----数组模板+对象数组举例
我们可以定义一个数组模板,并且利用该模板声明其数组成员.声明的方式非常简单,主需要一下两步: template<class ElementType,int n>; ElementType ...
- C++ 函数模板和排序的函数模板——学习笔记
我们在使用重载函数时,只是使用了函数名,而函数体还是得分别定义,在C++中函数模板为我们很好的解决了这个问题. 1.函数模板的声明 函数模板可以用来创建一个通用的函数,以支持多种不同的形参,避免重载函 ...
- jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递CSS选择 ...
- jQuery源码分析研究学习笔记-jQuery.clean()（七）
jQuery.clean( elems, context, fragment, scripts ) 参数elems:数组,包含了待转换的HTML是代码 参数context:文档对象,该参数在方法jQu ...
- ACM模板 | 学习笔记 树相关
持续更新中qwq 咕咕咕 此次update是在我原先自己的博客园博客的基础上进行更新的(隔了两年该忘的不该忘的都忘完了qwq),顺便整理一下我的acm模板QAQ (我保证2021.3.1开学之前搞完! ...
最新文章
- swift文件服务器,Swift3一行代码将各种类型文件上传到服务器
- VC2019无法打开文件msvcrtd.lib和Spectre 缓解库相关问题
- 12月7日学习内容整理：ORM单表操作
- //BASE64解码成File文件
- python输入输出有问题_使用pySerial从Python获取输入/输出错误
- 最小二乘法(多元)推导
- C#：把dll封入exe中方法
- [SPOJ - FTOUR2] Free tour II（点分治 + 背包dp + 启发式合并）
- 【转】什么是磁珠（Ferrite Bead 即 FB）
- flutter怎么手动刷新_Flutter 怎样更新？怎样升级？ - Flutter - Angular 教程网
- Au 音频效果参考：调制
- c语言多个自我介绍编码,代码自我介绍.doc
- Markdown pad2 使用本地图片
- 通过adb命令查看SN、CID码等信息
- Windows 10 喇叭红叉 重装驱动无效 点击喇叭显示无插座信息
- 使用Mathematica绘制星形线（Astroid）
- 椭圆曲线上的群和构造方法
- 手机APP开发之MIT Appinventor详细实战教程（一），利用通过蓝牙控制单片机，以及实现单片机与android设备之间的串口通信
- python入门教学视频材料整理-免费
- 关于STM32WB55一些测评评价