2011-01-20 18 views
6

Wydaje się, że mam pewne problemy z wywołaniem funkcji javascript w szablonie jquery. Mam demo założyć tutaj: http://jsfiddle.net/SXvsZ/8/Funkcja javascript wewnątrz szablonu jquery

Kod wygląda następująco:

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"); 

i szablon wygląda tak:

<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> 

Wydaje się, że powinna uczynić "hello world" Chciałbym, aby było to również renderowanie HTML jako html, a nie zwykłego tekstu.

+1

Hmm, ja nawet nie wiem, co miał jQuery :) –

Odpowiedz

10

Aby uczynić html wewnątrz szablonu z innej funkcji, trzeba będzie użyć {{html}} szablon.

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

Należy również przenieść funkcję htmlDetail spoza gotowy function()

1

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

Uwaga tego są wersję beta anyways więc nie są zakończone i najprawdopodobniej może zmienić lub nawet być przestarzałe więc nie należy polegać na tym zbyt wiele, jak na razie, ale oczywiście z nią eksperymentu :)

2

Wracając do pytania, problem wydaje się być taki, że htmlDetail musi zostać zdefiniowany przed samym szablonem. (Ich przykłady sugerują 'that)

Działa tutaj: http://jsfiddle.net/SXvsZ/9/

0

Można zdać non funkcję globalnego do szablonu aby go avialbale wewnątrz szablonu, jeśli nie chcesz, aby to globalne.

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

może być używany tak, {{html}} uczyni to bez kodowania

<p>Start: {{html $item.htmlDetail() }} :End</p> 
Powiązane problemy