jQuery模板:jQuery Templates Proposal

导言(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。

时间: 2024-09-12 08:43:14

jQuery模板:jQuery Templates Proposal的相关文章

jQuery模板技术和数据绑定实现代码_jquery

好消息来了,微软开发出了这样的框架,这是对jQuery的一个扩展,从此以后要在浏览器上动态显示服务器端Web Service返回的数据将变得如同用服务器端控件显示数据一样容易. 这个技术就叫jQuery templates and data linking ,这是微软对jQuery做的一个扩展.这种扩展需要jQuery官方的审核,然后才能被包含在jQuery中.据ScottGu的博客上说,此扩展正在等待审核阶段.但是这些功能却是非常强大而且实用,我就先把它转过来了,先睹为快. 在编写AJAX应用

10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易.  本文整理了10 款基于JavaScript和jQuery的模板引擎,希望能对你的开发工作带来一些帮助.  1. NANO  最简单的jQuery模板引擎,完美实现对JSON的解析.  源码 / 演示  2. The "template" binding  该工具通过渲染模板将相关联的DOM元

自己写的一个jquery模板引擎(json比较好用)

还是一个未完成的项目,缺乏对if等的支持,希望大家能提供一下参考的意见,让我把它 写完 js代码部分 1 /// <reference path="jquery-1.3.2-vsdoc.js" /> 2 var json = { "result": "success", "total": 3, "page": 1, "rows": [{ "QuestionID&qu

asp.net使用jquery模板引擎jtemplates呈现表格

这篇文章主要介绍了asp.net使用jquery模板引擎jtemplates呈现表格的示例,大家参考使用吧 在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的.  代码如下: <%@ Page Language="C#" Inheri

常用的jquery模板插件

 在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好

常用的jquery模板插件——jQuery Boilerplate介绍_jquery

在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好!

JQuery模板插件-jquery.tmpl

  在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQuery官方贡献的模板插件,网址:http://api.jquery.com/jquery.tmpl/.     Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的. {{html}}:输出变量html,但是没有html编码,适合输出html代码. {{if }} {{else}}:提供了分支逻辑. {{each}}:提供循环逻辑,$value访问迭代变量. 下面一个简单的模板tmpl实例:(代

JQuery模板插件jquery.tmpl-动态ajax扩展

   在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):da

jquery.tmpl JQuery模板插件_jquery

网址:http://api.jquery.com/jquery.tmpl/. Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的. {{html}}:输出变量html,但是没有html编码,适合输出html代码. {{if }} {{else}}:提供了分支逻辑. {{each}}:提供循环逻辑,$value访问迭代变量. 下面一个简单的模板tmpl实例:(代码最能说明一切) 效果: demo下载