jQuery模板:jQuery Templates Proposal(3)
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");
}
}
在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>