在jQuery core中增加模板支持

这部分包含一个提案－－给jQuery核心中添加一个声明和渲染模板的标准方法。这节包括模板API、示例代码和讨论要点。

API

jQuery.fn.render

通过给单个的数据项或一组数据项应用一个模板来生成DOM元素。

jQuery("#template")
   .render(arrayOrObject, options)
   .appendTo("selector");

参数

示例

下面是一个使用render()方法的简单例子。render()方法用来以列表的方式显示系列产品的name和price。

<script type="text/javascript">
jQuery(function(){
  var products = [
        { name: "Product 1", price: 12.99},
        { name: "Product 2", price: 9.99},
        { name: "Product 3", price: 35.59}
  ];
 
  $("#template")
     .render(products) 
     .appendTo("ul");
});
</script>
<script id="template" type="text/html">
 <li>{%= name %} - {%= price %}</li>
</script>
<ul></ul> 

执行上面的代码得到的是下面的无需列表。

• 产品1 - 12.99
• Product 2 – 9.99产品2 - 9.99
• Product 3 – 35.59产品3 - 35.59

jQuery DOM操作

jQuery DOM操作方法支持声明一个模板。例如，你可以使用jQuery.fn.append方法：

jQuery("selector")
   .append("#template", arrayOrObject, options);

参数

示例

下面的代码使用append()方法而不是render()方法在一个无需列表中显示系列产品的name和price。

<script type="text/javascript">
jQuery(function(){
  var products = [
        { name: "Product 1", price: 12.99},
        { name: "Product 2", price: 9.99},
        { name: "Product 3", price: 35.59}
  ];
  $("ul").append("#template", products);
});
</script>
<script id="template" type="text/html">
 <li>{%= name %} - {%= price %}</li>
</script>
<ul></ul> 

jQuery.templates

你可以指定一个或多个编译的模板给Query.templates对象设置。当你想给模板一个语义化的名字以便在一个文档中很方便的多次使用同一模板时，这很有用。

用jQuery.tmpl()函数编译一个模板

示例

<script type="text/javascript">
    // Assign compiled template
    jQuery.templates.foo = jQuery.tmpl("<li>{%=name%}</li>");
    // use name foo as template in append() method:
    jQuery("#container").append("foo", products);
</script>

jQuery.tmplFn

在一个模板实例中，你可以使用两个内置的函数text()和html()渲染一个数据项。你可以通过给jQuery.tmpFn对象指定一个新的函数在模板实例中扩展一组可用的函数。

下面的代码向你演示了如何创建even()函数，该函数在轮替模板时返回true。在下面的示例中，even()函数用来在模板中交替呈现粗体行。

<script type="text/javascript">
    $(function() {
        var products = [
            { name: "Product 1", price: 12.99 },
            { name: "Product 2", price: 9.99 },
            { name: "Product 3", price: 35.59 }
        ];
        $.tmplFn.even = function() {
            var context = jQuery._.context;
            return (context.index % 2 === 0);
        };
        $("div").append("#template", products);
    });
</script>
<script id="template" type="text/html">
  <div>
  {% if (even()) { %}
     <b> {%= name %} </b>
  {% } else { %}
     {%= name %} 
  {% }; %} 
  </div>
</script>
<div>
</div>

出处：Denis'Blog
责任编辑：moby

上一页 jQuery模板提案 [5] 下一页 jQuery模板提案 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。