jQuery模板:jQuery Templates Proposal_Javascript教程(2)_H5之家

默认情况下，为了防止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的内容有数据库动态生成。

PURE(纯粹分离式渲染引擎)

PURE 模板引擎的目的在于使开发人员不使用任何特殊标记来声明模板。使用PURE有两种方法：autoRender()方法或render()方法。

使用autoRender()方法时，PURE自动将JSON的属性名称映射到css的class上。例如，你可以编写下面的代码来显示单个产品。

$(showProduct);
function showProduct() {
var product = { name: "Laptop", price: 788.67 };
$('div.product').autoRender(product);
}

autoRender()通过将product的name和price 属性分别映射到class为name和price 的元素上来显示产品。

<div class="product">
    Product Name: <span class="name"></span>
    <br />
    Product Price: <span class="price"></span>
</div>

请注意，模板中没有特殊字符，PURE用纯粹的HTML完成一切。

autoRender()方法依赖于JSON的属性名映射到class名的协议，如果你不想依赖于该协议，你可以用render()方法来代替。

function showProduct() {
    var product = { name: "Laptop", price: 788.67 };
    var directives = { 'span#name' : 'name', 'span#price': 'price'};
    $('div.product').render(product, directives);
}

请注意，一系列指令和要显示的项目传递给render()。这些选择器将选择器映射到JSON属性名，第一个指令将Id为name的span元素映射到name属性，第二个指令将Id为price的span元素映射到price属性。下面是HTML：

<div class="product">
    Product Name: <span id="name"></span>
    <br />
    Product Price: <span id="price"></span>
</div>

PURE也可以用来渲染一个JavaScript对象数组。例如，下面的代码渲染一个product数组。

function showProducts() {
    var data = { "products": [
            { name: "Laptop", price: 788.67 },
            { name: "Comb", price: 2.50 },
            { name: "Pencil", price: 1.99 }
        ]};
    $('#productTemplate').autoRender(data);
}

由于数组名为product，PURE将每一个product映射到class为product的元素上，以下模板显示所有的三个product。

<div id="productTemplate">
<div class="products">
    Product Name: <span class="name"></span>
    <br />
    Product Price: <span class="price"></span>
</div>
</div>
ASP.NET Ajax 模板

在 ASP.NET的Ajax库支持客户端模板。这个库支持很多先进的功能：