jQuery模板提案（4）

ASP.NET Ajax 模板

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

• 伪变量－－你可以在模板中用一组诸如代表模板实例当前索引的$index特别变量；

• 动态模板－－ 在渲染JavaScript对象数组时，你可以动态的改变模板；

• 动态占位－－在渲染JavaScript对象数组时，你可以动态的更改模板的占位符。

例如，您可以使用下面的代码在模板中渲染产品列表：

var products = [
    { name: "Laptop", price: 788.67 },
    { name: "Comb", price: 2.50 },
    { name: "Pencil", price: 1.99 }           
];
Sys.require([Sys.components.dataView], function () {
    $("#products").dataView(
    {
        data: products
    });
});

DataView()方法用来在一个模板中显示系列产品。模板包含在名为product的div元素中。

<div id="products" class="sys-template"> <div id="{{ $id('product') }}"> Product Name: {{ name }} <br /> Product Price: {{ formatPrice(price) }} </div> </div>

请注意，ASP.NET　Ajax模板只是一个dom元素。因为模板仅仅是一个DOM元素，模板就不需要包裹在SCRIPT或TEXTARE或HTML注释中。在这种情况下，一个DIV元素为每一个产品创建一个新实例。

此外，请注意$id()伪变量。$id()解决模板和元素id的有关问题。如果你为一个模板添加一个带有id的元素，模板用来收集选项，结果是将出现重复id。$id()伪变量为每一个模板实例生成唯一的ids，使你避免了这个问题。

ASP.NET　Ajax还支持一种所谓的动态模板。想想以下，你已经为每一个新产品创建了一个模板，通常的产品模板看起来是这样的：

<!-- New template -->
<div id="newTemplate" class="sys-template">
    <div>
        <img src="new.gif" />
        Product Name: {{ name }}
        <br />
        Product Price: {{ formatPrice(price) }} 
    </div>
</div>
<!-- Normal template -->
<div id="normalTemplate" class="sys-template">
    <div>
        Product Name: {{ name }}
        <br />
        Product Price: {{ formatPrice(price) }} 
    </div>
</div>

这两个模板其实是一样的，除非新的模板显示一个新的图像。

你可以在每一个模板显示之前创建一个itemRendering事件处理程序。在该程序中，你可以指定用来显示数据项的模板。

function itemRendering(dataView, args) {
    // Get the current data item
    var product = args.get_dataItem();
    // Set the template dynamically
    if (product.dateCreated.getFullYear() == 2010) {
        args.set_itemTemplate("#newTemplate");
    } else {
        args.set_itemTemplate("#normalTemplate");
    }
}

上面的代码使用两个模板中的一个来显示产品。如果产品是新的(创建于2010年)用newTemplate来显示，否则用normalTemplate模板。

ASP.NET　Ajax还支持一种所谓的动态占位。动态占位使你可以在文档的不用位置显示不同项。例如，你可能希望你所有的新产品在你文档中的“新产品”区域显示：

<h1>New Products</h1>
<div id="newPlaceholder"></div>
 
<h1>All Products</h1>
<div id="normalTemplate" class="sys-template">
    <div>
        Product Name: {{ name }}
        <br />
        Product Price: {{ formatPrice(price) }} 
    </div>
</div>

请注意名为newPlaceholder的div元素。你希望所有新产品都出现在这里。

这里是你如何编写itemRendering处理程序在新的占位符中放置新产品－－创建于2010的产品。

function itemRendering(dataView, args) {
    // Get the current data item
    var product = args.get_dataItem();
    // Set the template dynamically
    if (product.dateCreated.getFullYear() == 2010) {
        args.set_itemPlaceholder("#newPlaceholder");
    } 
}