jQuery模板提案
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2010-03-30 18:27:00
导言(Introduction)
这个提案描述了如何在jQuery的核心库中增加模板支持。更为特别是,这个提案描述了一个新的jQuery方法--名叫render(),该方法可以使你用一段HTML代码渲染一个Javascript 对象和Javascript数组作为一个模板。
该提案的目的在于使插件开发者可以利用标准的方法声明和渲染模板。有一个标准的方法声明和渲染模板对每一个人都很有裨益:
插件开发者可以构建丰富的、数据驱动的插件,如DataGrid插件。插件开发者可以在jQuery的核心库对模板支持的基础上构建插件,这样每一次开发新的插件时,可以避免重新实施渲染模板代码。
插件用户可以利用一个标准的语法声明模板。插件用户每次创建模板时不需学习一种新的方法,每次都是从使用新的插件开始。
该提案分两个主要部分。第一部分包含现有模板解决方案简要调查,第二部分是我们的建议,声明和渲染一个模板的方法如何添加到jQuery的核心库中。
现有的模板解决方案
现在已经有了许多JavaScript的解决方案模板,从这方面说,标准化的模板解决方案必然是大势所趋。在本节中,我们向你简要描述四个最流行最有趣的模板。现有的模板解决方案能解决什么?那些特色在jQuery核心中有意义。
微模板
John Resig的微型模板引擎非常小(未压缩仅2KB)。然而,这点小小的代码已经抓到了渲染一个模板的核心功能。
下面是一个用微模板引擎显示单个JavaScript产品对象的例子。
<script src="../jquery-1.4.1.js" type="text/javascript">>;/script>;
<script src="MicroTemplating.js" type="text/javascript">;</script>;
<script type="text/javascript">;
var product = { name: "Laptop", price: 788.67 };
$(showProduct);
function showProduct() {
$("#results").html( tmpl("productTemplate", product) );
}
function formatPrice(price) {
return "$" + price;
}
</script>;
tmpl()方法用来从一个product模板和product对象生成一个字符串。其结果分配给一个名叫results的div元素的innerHTML。
product模板在页面body的SCRIPT中定义。
<script type="text/html" id="productTemplate">
Product Name: <%= name %>
<br />
Product Price: <%= formatPrice(price) %>
</script>
<div id="results"></div>
注意,SCRIPT的type属性为“text/ html”。用这种方式来声明web浏览器会忽略SCRIPT里的内容,将其内容当作字符串来对待。
注意,模板包含代表产品名称和价格属性的表达式。调用JavaScript的formatPrice()方法来格式化产品的价格。在模板里你可以调用任何JavaScript函数。
这里是如何渲染一个product对象数组的示例:
function showProducts() {
// parse the template
var template = tmpl("productTemplate");
// loop through the products
var results = '';
for (var i = 0; i < products.length; i++) {
results += template(products[i]);
}
// show the results
$("#results").html(results);
}
tmpl()函数支持currying(关于什么currying,可以在网上查阅资料)。如果没有提供数据给tmpl()函数,他将返回一个javascript函数,代表解析的模板。
在上面的代码中,模板被解析,然后为每一个product调用模板方法生成一个字符串。最后,字符串分配给名叫results的div元素的innerHTML。


猜你喜欢
- 百万级数据处理方案数据存储结构设计表字段设计表字段 not null,因为 null 值很难查询优化且占用额外的索引空间,推荐默认数字 0。
- 本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考,具体如下:<!DOCTYPE html PUBLIC "-/
- 最近看Python看得都不用tab键了,哈哈。今天看了一个经典问题--八皇后问题,说实话,以前学C、C++的时候有这个问题,但是当时不爱学,
- PDOStatement::errorCodePDOStatement::errorCode — 获取跟上一次语句句柄操作相关的 SQLST
- 问题复现:连接钱包后,会调用函数,弹出窗口让用户签名if (signatureMessage) {
- 在开发web的时候,如果是以前已存在的项目,项目下载下来后,为了使用测试库的数据,会直接将整个测试库(如sqlite3)拿到本机来。这种情况
- 一、本文使用的第三方包和工具python 3.8 谷歌浏览器selenium(3.141.0)(pip install
- 锁的定义在计算机程序中锁用于独占资源,获取到锁才可以操作对应的资源。锁的实现锁在计算机底层的实现,依赖于CPU提供的CAS指令(compar
- 平时工作过程中,git在push代码的时候有时会遇到如下的错误错误原因文件冲突,本地的代码和远程Repository中的文件个数不一致(即远
- 如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下:推荐:网页弹出窗口
- 说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!一丶说明测试条件:需要有GitHub账号以及在本地安装了Git工具,无论
- <html> <head> <meta http-equiv="Content-Type"
- 本文主要是记录ubuntu 16.04下python环境配置,具体内容如下对于ubuntu 16.04,由于本身是自带python,这样就减
- 随着网络的迅速发展 发展 发展,二维码的应用将会越来越多。同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧。下面分享了几个
- 我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边
- 父传子:1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"在这里为了大家区分我将父组件中的数据
- 下面直接上代码留存,方便以后查阅复用。# -*- coding: utf-8 -*- #作者:LeniyTsan#时间:2014-07-17
- 前言最近发现有些东西长时间不用就要忘了,坚持每天复习总结一个小知识点吧~异常是什么呢?就是在代码执行过程中非预期的执行结果,随着代码越来越复
- alert("abacacf".replace('a','9')); alert(&qu
- XSL(EXtensible Stylesheet Language)它是指可扩展样式表语言。 XSL之于 XML 就像 CSS 之于 HT