jquery jTemplates setTemplateURL 去除HTML编码以及jTempla

下载：jTemplates/jquery-jtemplates_uncompressed.js这个是没有压缩的js，在其中找到：

TemplateUtils.escapeHTML = function(txt) {
return txt;//.replace(/&/g,’&amp;’).replace(/>/g,’&gt;’).replace(/</g,’&lt;’).replace(/"/g,’&quot;’).replace(/’/g,’&#39;’);
};

//从这句就不难看出怎么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支持很多先进的功能，包括：

• 外部模板－－您可以通过提供的URL从外部文件加载模板，外部文件可以包含多个模板；
• 外部数据－－您可以从外部URL加载数据；
• 实时刷新－－你可以自动定期的更新模板内容；
• HTML编码－－你可以阻止诸如<和>的编码字符对JavaScript插入的攻击；
• Includes－－您可以在一个模板中包含另一个模板；
• 调试模式－－您可以在出错的地方终止模板引擎，并显示错误信息。

下面示例中的代码演示了如何使用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>，那么，名称将被转换成&lt;b&gt;Laptop&lt;/b&gt; 。

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