下载:jTemplates/jquery-jtemplates_uncompressed.js这个是没有压缩的js,在其中找到:
TemplateUtils.escapeHTML = function(txt) {
return txt;//.replace(/&/g,’&’).replace(/>/g,’>’).replace(/</g,’<’).replace(/"/g,’"’).replace(/’/g,’'’);
};
//从这句就不难看出怎么HTML编码了吧。我在此把编码的都去除了。恢复原生态内容代码。
修改完后可以再次压缩,可以用在线压缩工具:http://js.clicki.cc/ 、 http://www.camnpr.com
Latest version:
- compressed: jTemplates/jquery-jtemplates.js
- uncompressed: jTemplates/jquery-jtemplates_uncompressed.js
Short specification: jTemplates
All files in zip: jTemplates.zip
Dual licensed under the (MIT) and/or (GPL) licenses.
jTemplates
jTemplates是一个功能丰富的模板引擎,它作为一个jQuery插件来执行。jTemplates支持很多先进的功能,包括:
下面示例中的代码演示了如何使用jTemplates显示产品清单。
<script src="../jquery-1.4.1.js" type="text/javascript"></script>
<script src="jquery-jtemplates_uncompressed.js" type="text/javascript"></script>
<script type="text/javascript">
var data = {
products: [
{ name: "Laptop", price: 788.67 },
{ name: "Comb", price: 2.50 },
{ name: "Pencil", price: 1.99 }
]};
$(showProducts);
function showProducts() {
// attach the template
$("#results").setTemplateElement("template");
// process the template
$("#results").processTemplate(data);
}
function formatPrice(price) {
return "$" + price;
}
</script>
setTemplateElement()方法给HTML元素指定一个模板,processTemplate()方法使用所提供的数据处理模板。
上面的代码中,加载的模板为名为textarea的元素,下面就是模板在页面主体中呈现的外观。
<textarea id="template" style="display:none">
{#foreach $T.products as product}
<div>
Product Name: {$T.product.name}
<br />
Product Price: {formatPrice($T.product.price)}
</div>
{#/for}
</textarea>
注意,一个jTemplate模板可以包含诸如#foreach、#for、and #if的特殊命令。至于调用formatPrice()函数,它表明模板也可以包含任意JavaScript函数的调用。
默认情况下,为了防止JavaScript的插入攻击,在传递给模板的数据中,jTemplate 的HTML编码了包含的特殊字符。例如,如果一个产品的名称为<b>Laptop<b>,那么,名称将被转换成<b>Laptop</b> 。
jTemplates使您可以同时从外部URL加载模板和数据。例如,下面的代码将从一个名为MyTemplates.htm的文件中加在模板,从一个名为MyData.htm文件中加在一系列数据。
function showProducts() {
$.jTemplatesDebugMode(true);
// attach the template
$("#results").setTemplateURL("MyTemplate.htm");
// process the template
$("#results").processTemplateURL("MyData.htm");
}
MyTemplate.htm文件如下所示:
{#foreach $T.products as product}
Product Name: {$T.product.name}
Product Price: {formatPrice($T.product.price)}
{#/for}
jTemplates允许您可以在一个单一文件定义多个模板,虽然在MyTemplate.htm文件没有演示此功能。
最后,MyData.htm文件如下所示:
{"products": [
{ "name": "Laptop", "price": "788.67" },
{ "name": "Comb", "price": 2.50 },
{ "name": "Pencil", "price": 1.99 }
] }
当然,包含在MyData.htm的内容有数据库动态生成。
下边介绍一下这个jTemplates的参数说明:
Tags:
{|CODE|} - evaluate COND
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
{#continue}
{#break}
{#include |NAME| [root=|VAR|]}
{#param name=|NAME| value=|CODE|}
{#cycle values=|ARRAY|}
{#ldelim}
{#rdelim}
{#literal}..{#/literal}
{*..*} - comment
where:
|CODE| - JavaScript code
|COND| - JavaScript condition
|NAME| - String
|NUMBER| - Number
|ARRAY| - Array
|VAR| - Variable
|FUNC| - Function
--------------------------------------------------------------------------------
Templates:
{#template <name>}
..
{#/template <name>}
Main template (must be one in template’s file):
{#template MAIN}
..
{#/template MAIN}
--------------------------------------------------------------------------------
Tag’s details:
|VAR| and |CODE| and |COND| allow use:
$T - data
$P - parameters
$Q - HTML Element
$Q.version - version of jTemplates
|VAR:foreach| & |VAR:for|:
$index
$iteration
$first
$last
$total
$key - key in object
$typeof - type of element
examples:
$T.item$index
$T.item$key
Members:
$T.<name>
examples:
$T.name
$T.id
Tables:
$T[<index>]
examples:
$T[0]
$T[1]
--------------------------------------------------------------------------------
Plugin to jQuery:
jQuery jQuery.fn.setTemplate(String template, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplate(Template template);
jQuery jQuery.fn.setTemplateURL(String url, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplateElement(String elementName, [Array includes], [Object settings]);
Template jQuery.createTemplate(String template, [Array includes], [Object settings]);
Template jQuery.createTemplateURL(String url, [Array includes], [Object settings]);
Template jQuery.getTemplate(Element element);
string jQuery.processTemplateToText(Template template, [Object data], [Object parameter]);
Number jQuery.fn.hasTemplate();
jQuery jQuery.fn.removeTemplate();
jQuery jQuery.fn.setParam(String name, Object value);
jQuery jQuery.fn.processTemplate(Object data, [Object parameters]);
jQuery jQuery.fn.processTemplateURL(String url, [Object parameters], [Object options]);
Updater jQuery.fn.processTemplateStart(String url, Array param, Integer interval, [Array args], [Object options]);
jQuery jQuery.fn.processTemplateStop();
jQuery.jTemplatesDebugMode(Boolean value);
--------------------------------------------------------------------------------
Template’s settings:
disallow_functions - forbid use functions in data $T [default: false, depend on: clone_data, clone_params]
filter_data - replace chars: <, >, &, ’ and " in data $T to HTML entities [default: true, depend on: clone_data]
filter_params - replace chars: <, >, &, ’ and " in parameters $P to HTML entities [default: false, depend on: clone_params]
runnable_functions - automatically run function (from data) inside {} [default: false]
clone_data - clone input data [default: true]
clone_params - clone input parameters [default: true]
f_cloneData - Function using to data cloning [default: TemplateUtils.cloneData]
f_escapeString - Function using to escape strings [default: TemplateUtils.escapeHTML]
--------------------------------------------------------------------------------
Callbacks and options:
* jQuery.fn.processTemplateURL:
type - ’GET’ or ’POST’, default: ’GET’
data - Data to be sent to the server. Default: undefined
dataFilter - A function to be used to handle the raw response data of XMLHttpRequest. Default: undefined
async - asynchronous AJAX, default: true
cache - use cache, default: false
timeout - Set a local timeout in ms for the request.
on_success [callback] - Run after success
on_error [callback] - Run on error
on_complete [callback] - Run after success and error
--------------------------------------------------------------------------------
Internal Templates API:
Template::Template(String template, [Array includes], [Array settings]);
void Template::setTemplate(String template, [Array includes]);
String Template::get(Object data, Object parameters, HTMLElement element, Number deep);
void Template::setParam(String name, Object value);
Template.DEBUG_MODE
--------------------------------------------------------------------------------
XHTML with embedded Templates.
How to embedded the template:
1) Simple:
<textarea id="name" style="display:none">
... templates ...
</textarea>
2) Valid XHTML 1.1:
<p style="display:none"><textarea id="name" rows="0" cols="0"><![CDATA[
... templates ...
]]></textarea></p>
3) Using comment:
<p style="display:none"><textarea id="name" rows="0" cols="0"><!--
... templates ...
--></textarea></p>
接下来说明应用一下上边的语法:
jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集时发愁了。
首先送上jTtemplates的官网地址:http://jtemplates.tpython.com/,你可以在这里下载代码和相关参考文档
在使用jTemplates时最好先定义好模板,你可以把它放在textarea文本框里如:
<textarea id="txtTemplate" style="display:none">
<![CDATA[
hello {$T.name}.
]]>
</textarea>
这样就定了一个简单的模板,下面再进行模板数据的定义:
var mydata = { name: "Anne", age: "20" };
定义模板显示容器:
<div id="result1"></div>
通过简单的两行代码就可以完成模板的执行工作:
$("#result1").setTemplateElement("txtTemplate");
$("#result1").processTemplate(mydata);
显示结果:
hello Anne.
如何?是不是很简单方便且实用!
别急,这只是jTemplates强大功能的冰山一角。
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