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"); } }
出处:Denis'Blog
责任编辑:moby
上一页 jQuery模板提案 [4] 下一页 jQuery模板提案 [6]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|