<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);
 

参数

参数 类型 描述

selector 字符串 代表模板选择符的一个字符串

data 任何数据对象 任何数据对象 如果是数组，为每一项实例化化一次。否则，该模板仅实例化一次

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>
模板语法
内嵌表达式
表达式可以用{%= ... %} 的语法形式插入，这个分隔符最大限度的减少了编码标记的机会，同时避免与现有的服务器端和客户端的扩展标记相冲突（例如：{%=...%}可能与ASP和 ASP.NET相冲突）。

示例

简单的数据插入：

<script type="text/html" id="tmp1">
    <li>{%= last %}, {%= first %}</li>
</script>
 

表达式为javascript，你可以调用任何JavaScript函数用或使用更复杂的表达式。但是，注意，保持模板尽可能的简单是首选，后面要描述的两个回调有助于理解这些。

<script type="text/html" id="tmp1">
    <li>{%= last + " " + first %}</li>
</script>

HTML插入
默认情况下，数据项在模板中被渲染时不会被HTML编码。如果你在一个模板中显示用户提交的数据，那么恶意用户就能够执行跨站点脚本攻击(XSS)。

注意下面代码中第一个产品的名字，第一个产品包含一个没有任何恶意的onClick事件处理程序，当数据项显示，有人点击了产品名字，JavaScript得到执行。