模板渲染和呈現(xiàn)回調(diào)
你可以利用傳遞給render()函數(shù)或append()的options參數(shù)來指定模板回調(diào)函數(shù)。有兩個(gè)回調(diào)函數(shù)：
- rendering：該函數(shù)在模板渲染時(shí)立即調(diào)用。它作為模板自身內(nèi)同一$context對(duì)象的參數(shù)。回調(diào)返回flase以防渲染數(shù)據(jù)項(xiàng)。
- rendered：該函數(shù)在模板渲染時(shí)立即調(diào)用，但是在DOM元素已添加到文檔之前。 它同樣作為模板自身內(nèi)同一$context對(duì)象的參數(shù)。
以下幾節(jié)討論使用rendering和rendered函數(shù)的幾種情況：
執(zhí)行復(fù)雜的計(jì)算
想象以下你要計(jì)算在模板中顯示的每個(gè)product的稅率，但你又不想計(jì)算稅率的邏輯出現(xiàn)在模板自身中。此時(shí)，你可以像這樣在rendering函數(shù)中執(zhí)行稅率計(jì)算：
<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()回調(diào)取消特定模板實(shí)例的渲染。下面的代碼演示了如何僅渲染標(biāo)了刪除標(biāo)記的產(chǎn)品。
<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>
當(dāng)rendering()返回false時(shí)，模板不會(huì)顯示。在上面的示例代碼中，當(dāng)產(chǎn)品標(biāo)上刪除標(biāo)記時(shí)，模板不會(huì)渲染。
嵌套模板
利用回調(diào)函數(shù)，你可以創(chuàng)建其嵌套模板。例如，下面代碼顯示了如何顯示聯(lián)系人名單，每個(gè)聯(lián)系人有一個(gè)或多個(gè)電話號(hào)碼。contactTemplate 用來顯示聯(lián)系人名單，phoneTemplate 用來顯示每個(gè)電話號(hào)碼。
<script type="text/javascript">
$(function() {
var contacts = [
{ name: "Dave Reed", phones: ["209-989-8888", "209-800-9090"] },
{ name: "Stephen Walther", phones: ["206-999-8888"] },
{ name: "Boris Moore", phones: ["415-999-2545"] }
];
$("div").append("#contactTemplate", contacts, {rendered:rendered});
});
function rendered(context, dom) {
$("div.phones", dom)
.append("#phoneTemplate", context.dataItem.phones);
}
</script>
<script id="contactTemplate" type="text/html">
<div>
{%= name %}
<div class="phones"></div>
</div>
</script>
<script id="phoneTemplate" type="text/html">
<div>
Phone: {%= $context.dataItem %}
</div>
</script>
<div></div>
創(chuàng)建插件
假設(shè)你想在模板中使用插件－－如jQuery UI Datepicker。此外，想象以下，你希望插件顯示數(shù)據(jù)項(xiàng)的值。例如，你希望DatePicker 默認(rèn)顯示數(shù)據(jù)項(xiàng)的一個(gè)date屬性。在這種情況下，你需要利用rendered()回調(diào)創(chuàng)建插件并用數(shù)據(jù)項(xiàng)的值初始化插件。
例如，下面的代碼顯示聯(lián)系人的名單，rendered() 用來創(chuàng)建一個(gè)jQuery UI Datepicker插件，并在模板中的一個(gè)input元素中附加插件。DataPicker 的默認(rèn)值為聯(lián)系人的生日。
<script type="text/javascript">
$(function() {
var contacts = [
{ name: "Dave Reed", birthdate: new Date("12/25/1980") },
{ name: "Stephen Walther", birthdate: new Date("12/25/1977") },
{ name: "Boris Moore", birthdate: new Date("12/25/1934") },
{ name: "Eilon Lipton", birthdate: new Date("12/25/2004") },
{ name: "Assad Safiullah", birthdate: new Date("12/25/1954") }
];
$("div").append("#template", contacts, { rendered: rendered });
});
function rendered(context, dom) {
$("input", dom)
.datepicker({ defaultDate: context.dataItem.birthdate })
}
</script>
<script id="template" type="text/html">
<div>
{%= name %}
<br />
birthdate: <input />
</div>
</script>
<div></div>
無表達(dá)式模板
如果你不想任何諸如{%=....%}的表達(dá)式出現(xiàn)在模板中，你可以在模板實(shí)例中使用rendered函數(shù)動(dòng)態(tài)的為一個(gè)元素賦值。例如，下面模板顯示產(chǎn)品清單。注意，模板只包含HTML標(biāo)記，沒有表達(dá)式。
<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 }
];
$("ul").append("#template", products, { rendered: rendered });
function rendered(context, dom) {
$("span.name", dom).html(context.dataItem.name);
$("span.price", dom).html(context.dataItem.price);
}
});
</script>
<script id="template" type="text/html">
<li><span class="name"></span> - <span class="price"></span></li>
</script>
<ul></ul>
出處：
責(zé)任編輯：moby
上一頁 jQuery模板提案 [8] 下一頁 jQuery模板提案 [10]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 9 頁 jQuery模板提案 [9]
