<script type="text/javascript">
jQuery(function() {
var products = [
{ name: "Product 1", price: 12.99, salePrice: 10.99 },
{ name: "Product 2", price: 9.99, salePrice: 7.99 },
{ name: "Product 3", price: 35.59, salePrice: 33.59 }
];
$("ul").append("#template", products, { showSalePrice: true });
});
</script>
<script id="template" type="text/html">
<li>
{%= name %} -
{%= $context.options.showSalePrice ? salePrice : price %}
</li>
</script>
<ul></ul>
注意如何在模板中根据$ context.options.showSalePrice属性来显示正常价格或零售价格。
模板渲染和呈现回调
你可以利用传递给render()函数或append()的options参数来指定模板回调函数。有两个回调函数:
rendering:该函数在模板渲染时立即调用。它作为模板自身内同一$context对象的参数。回调返回flase以防渲染数据项。
rendered:该函数在模板渲染时立即调用,但是在DOM元素已添加到文档之前。 它同样作为模板自身内同一$context对象的参数。
以下几节讨论使用rendering和rendered函数的几种情况:
执行复杂的计算
想象以下你要计算在模板中显示的每个product的税率,但你又不想计算税率的逻辑出现在模板自身中。此时,你可以像这样在rendering函数中执行税率计算:
<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, { rendering: rendering });
function rendering(context) {
var item = context.dataItem;
// setup additional information to be used more clearly within the template
// (avoids complex expressions)
item.tax = Math.floor(item.price * 8.75) / 100;
}
});
</script>
<script id="template" type="text/html">
<li>{%= name %} - price with tax {%= price + tax %} </li>
</script>
<ul></ul>
取消模板渲染
你可以利用rendering()回调取消特定模板实例的渲染。下面的代码演示了如何仅渲染标了删除标记的产品。
<script type="text/javascript">
jQuery(function() {
var products = [
{ name: "Product 1", price: 12.99 },
{ name: "Product 2", price: 9.99, deleted: true },
{ name: "Product 3", price: 35.59 }
];
$("ul").append("#template", products, { rendering: rendering });
function rendering(context) {
if (context.dataItem.deleted) {
return false;
}
}
});
</script>
<script id="template" type="text/html">
<li>{%= name %} - {%= price %}</li>
</script>
<ul></ul>
当rendering()返回false时,模板不会显示。在上面的示例代码中,当产品标上删除标记时,模板不会渲染。