jQuery模板提案(2)
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2010-03-30 18:27:00
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>,那么,名称将被转换成<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的内容有数据库动态生成。
猜你喜欢
- 本文实例介绍了使用javascript来经验表单数据的方法,如:校验是否为英文,校验是否为数字及校验IP地址等: &l
- 我们用下了asp代码简单统计了下载一个文件需要的时间:<%Function DownloadTime(intFileSize
- asp+access用户登录代码,loginnew.asp网面包含了登录框及验证用户的代码an.mdb数据库名fd表名y_username用
- 英文原文:http://www.456bereastreet.com/archive/200601/css_3_selectors_expl
- 过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式,涌现了很多与之相关的技术与理论资料,其中相当重要的一个领域就是关于印刷中字号和行高的
- 继续我们的 Javascript 优化计划,上期已经做到怎么尽可能的缩小 Javascript 脚本的文件体积便于传输。不过这样做仅仅是不够
- 这篇论坛文章(赛迪网技术社区)详细的介绍了在MySQL中使用GRANT语句增添新用户的具体步骤,更多内容请参考下文…&
- 在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都
- JavaScript中的字符串函数没有像VBScript\ASP中的内部函数那么全.不能像VB那样直接利用left和right函数来实现对字
- 如何使用mailto?1)基本用法<a href=mailto:sample@163.com>send em
- 我一直使用Microsoft的FrontPage 98来开发ASP/ADO之类的Internet数据库应用程序。现在我听说许多人都非常信奉采
- ASP中RegExp是什么 '名字字符检验Public Function CheckName(Str) &nbs
- 今天在 经纬 同学blog看到的。有这么一段代码:<ul id="demo"><li>
- 如何终止浏览器的 CAHCE 页面?Function Redirect( NewURL ) If&n
- 抽象工厂模式Abstract Factory Pattern是什么抽象工厂模式是一种创建型模式,它提供了一种创建一系列相关或相互依赖对象的最
- 下载了一个小型的记帐软件,发现这个软件数据库用的是access,很想看看它的数据库结构怎样,结果人家加密了。access的解密小case了,
- 内容摘要:浏览器不兼容这个难题,一直是网页设计师们头痛的事情。ie7.0的面世,尚且不论他是否较之ie6.0进步, ie7和ie6
- 有时候,我们需要替换指定标签外的内容,而保留标签里面的内容不替换。比如当我们要在浏览器中显示出编辑器显示的原始格式时、需要将普通换行符“\n
- master库对于SQLServer来说,是很重要的系统数据库,保存着所有Sqlserver的用户信息、数据库信息等,当数据库崩溃时,mas
- Asp中Server.ScriptTimeOut属性需要注意的一点Server.ScriptTimeout?这个属性给定Asp脚本执行的最大