jquery jTemplates setTemplateURL 去除HTML编码以及jTempla

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2010/12/23

下载: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

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/142.html