jQuery的模板插件

關於jQuery的模板和東西我做錯了這個例子。任何幫助將不勝感激。這是他的代碼：數據：

var invoice = { 
    invoiceItems: [ 
    { type: 'item', 
     part: '99Designs', description: '99 Designs Logo', 
     price: 450.00, qty: 1 }, 
    { type: 'service', 
     service: 'Web development and testing', 
     price: 25000.00 }, 
    { type: 'item', 
     part: 'LinodeMonthly', description: 'Monthly site hosting', 
     price: 40.00, qty: 12 } 
    ] 
};

客戶：

<script id="invoiceTemplate" type="x-jquery-tmpl"> 
     <table class="invoice"> 
     {{each lineItems}} 
     {{tmpl($value) get_invoiceRowTemplateName(type)}} 
     {{/each}} 
     </table> 
    </script>

JS：

$(function() 
{ 
    $('#invoiceTemplate').tmpl(invoice).appendTo('body'); 
}); 

function get_invoiceRowTemplateName(type) { 
    // Return a template selector that matches our 
    // convention of <type>RowTemplate. 
    return '#' + type + 'RowTemplate'; 
}

來源

2010-11-16 pyccki

你可能要闡述什麼「錯」的意思......你得到一個輸出，是輸出錯的，什麼是錯的結果，等等等等 – Ben 2010-11-16 01:37:36

@Ben 它沒有做任何事情，但戴夫已經回答我的問題，我錯過了「行」模板。 – pyccki 2010-11-16 15:58:32

不要忘記行模板：

<script id="serviceRowTemplate" type="x-jquery-tmpl"> 
    <tr class="service"> 
    <td colspan="2">${service}</td> 
    <td colspan="2">${price}</td> 
    </tr> 
</script> 

<script id="itemRowTemplate" type="x-jquery-tmpl"> 
    <tr class="item"> 
    <td>${item}</td> 
    <td>${description}</td> 
    <td>${price}</td> 
    <td>${qty}</td> 
    </tr> 
</script>

當get_invoiceRowTemplateName（）將每個項目的type解析爲相應的* type * RowTemplate時，這些單獨的行模板就是用於呈現每個項目的內容。

來源

2010-11-16 02:46:47

明白了戴夫。非常感謝！ – pyccki 2010-11-16 15:57:57

jQuery的模板插件

回答

相關問題