2011-03-25 11 views
9

यह jquery-tmpl API दस्तावेज़ों में कोड के आधार पर एक साधारण उदाहरण है। मैं एक नेस्टेड {{tmpl}} टैग का उपयोग करना चाहता हूं - यहां "शीर्षक टेम्पलेट"। मैं बाहरी टेम्पलेट और नेस्टेड टेम्पलेट दोनों में विभिन्न सहायक कार्यों का उपयोग करना चाहता हूं। इस उदाहरण में एक छोटा सा सहायक कार्य है जिसे "एम्बल्डन" कहा जाता है जिसे प्रारंभिक tmpl() कॉल में पास किया जाता है।मैं jquery-templates में नेस्टेड {{tmpl}} टैग में फ़ंक्शंस को कैसे कॉल करूं?

निम्नलिखित कार्य करता है। मैं शीर्षक टेम्पलेट के अंदर नाम डेटा को गले लगाने में सक्षम हूं। लेकिन यह गन्दा लगता है। क्या ऐसा करने का कोई क्लीनर तरीका है? चूंकि प्रारूप हेल्पर्स को मूल tmpl() कॉल में पास किया गया है, क्या यह वास्तव में {{tmpl}} टैग में पास करना आवश्यक है?

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data, formatHelpers) "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${$item.embolden(Director)}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${$item.embolden($item.data.Name)}</td></tr> 
</script> 

<table><tbody id="movieList"></tbody></table> 

<script> 
var formatHelpers = { 
    embolden: function(i) { 
     return "*" + i + "*"; 
    } 
}; 

var movies = [ 
    { Name: "The Red Violin", Director: "François Girard" }, 
    { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" }, 
    { Name: "The Inheritance", Director: "Mauro Bolognini" } 
]; 

/* Render the template with the movies data */ 
$("#movieTemplate").tmpl(movies, formatHelpers).appendTo("#movieList"); 
</script> 

उत्तर

12

अपने उदाहरण के साथ, तुम सब करने की जरूरत है jsfiddle पर

{{tmpl($item.data, $item) "#titleTemplate"}} 

कोड उदाहरण है।

एक और तरीका यह है कि आप ऐसा कर सकते हैं अपने प्रारूप को परिभाषित करना वैश्विक क्षेत्र में हेल्पर आपको सीधे अपने टेम्पलेट में कॉल करने में सक्षम होना चाहिए। jsfiddle पर

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data) "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${formatHelpers.embolden(Director)}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${formatHelpers.embolden(Name)}</td></tr> 
</script> 

कोड उदाहरण:

var formatHelpers = { 
    embolden: function(i) { 
     return "*" + i + "*"; 
    } 
}; 
$(function() { 
    var movies = [ 
     { 
     Name: "The Red Violin", 
     Director: "François Girard"}, 
    { 
     Name: "Eyes Wide Shut", 
     Director: "Stanley Kubrick"}, 
    { 
     Name: "The Inheritance", 
     Director: "Mauro Bolognini"} 
    ]; 

    $("#movieTemplate").tmpl(movies).appendTo("#movieList"); 
}); 

और अपने टेम्पलेट के अंदर आप निम्न कर सकते।

+0

धन्यवाद! पहला समाधान वह है जिसे मैं ढूंढ रहा था, क्योंकि यह मुझे प्रारूप में कार्यों को लिखने देता है, जहां 'यह' वर्तमान tmplItem को संदर्भित करता है। – heyotwell

संबंधित मुद्दे