2011-01-20 17 views
6

लगता है कि मुझे jquery टेम्पलेट के अंदर जावास्क्रिप्ट फ़ंक्शन को कॉल करने में कुछ समस्याएं आ रही हैं। मैं गया एक डेमो यहाँ सेट कर लेते हैं: http://jsfiddle.net/SXvsZ/8/jquery टेम्पलेट के अंदर जावास्क्रिप्ट फ़ंक्शन

कोड की तरह दिखता है:

function htmlDetail(){ 
    return "hello <strong>world</strong>"; 
} 

var book = [ 
    { title: "Goodnight, World!", 
    detail: { author: "Jojo Mojo", synopsis : "What the ..." }}, 
{ title: "Rainbow", 
    detail: { author: "Cookie", synopsis : "Huh?" }} 
]; 

$("#testTemplate").tmpl(book).appendTo("#bookList"); 

और तरह टेम्पलेट दिखता है:

<script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}} 
     <h3>${title}</h3> 
     <p>Start: ${ htmlDetail() } :End</p> 
    {{/if}} 
</script> 

<div id="bookList"></div> 

लगता है जैसे कि यह प्रस्तुत करना चाहिए "हैलो दुनिया" मैं इसे HTML को HTML के रूप में प्रस्तुत करना चाहता हूं और सादा पाठ नहीं चाहता हूं।

+1

हम्म साथ प्रदान करेगा, मैं भी jQuery इस था पता नहीं था :) –

उत्तर

10

एक और समारोह से टेम्पलेट के अंदर एचटीएमएल प्रस्तुत करना के लिए, आपको {{एचटीएमएल}} टेम्पलेट टैग का उपयोग करने की आवश्यकता होगी।

<script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}} 
     <h3>${title}</h3> 
     <p>Start: {{html htmlDetail() }} :End</p> 
    {{/if}} 
</script> 

आप भी अपने तैयार() फ़ंक्शन के बाहर htmlDetail समारोह ले जाते हैं,

1

http://api.jquery.com/template-tag-html/

नोट इस बीटा संस्करण वैसे भी कर रहे हैं ताकि वे अंतिम रूप नहीं कर रहे हैं और सबसे अधिक संभावना बदल सकता है या यहाँ तक कि इसलिए बहिष्कार कर दिया इसके साथ कि अभी तक बिल्कुल के रूप में बहुत ज्यादा है, लेकिन ऐसा प्रयोग पर भरोसा नहीं करते :)

2

अपने प्रश्न पर वापस आना, समस्या यह है कि htmlDetail को टेम्पलेट से पहले परिभाषित करने की आवश्यकता है। (उनके उदाहरण 'सुझाव दें' कि)

यह यहाँ काम करता है: http://jsfiddle.net/SXvsZ/9/

0

आप टेम्पलेट के अंदर यह avialbale बनाने के लिए टेम्पलेट के लिए एक गैर वैश्विक समारोह पारित कर सकते हैं करना चाहिए यदि आप बनाने के लिए नहीं चुनते हैं यह वैश्विक है।

$("#testTemplate").tmpl(book, {htmlDetail : htmlDetail}).appendTo("#bookList"); 

इसे इस तरह इस्तेमाल किया जा सकता, {{एचटीएमएल}} यह कोई एन्कोडिंग

<p>Start: {{html $item.htmlDetail() }} :End</p> 
संबंधित मुद्दे