funzione javascript all'interno del template jquery

Question

Sembra che stia avendo alcuni problemi nel chiamare una funzione javascript all'interno di un template jquery. Ho un demo ha installato qui: http://jsfiddle.net/SXvsZ/8/

Codice assomiglia:

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

e il modello si presenta come:

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

sembra che dovrebbe rendere "ciao mondo" Mi piacerebbe avere anche il rendering dell'HTML come HTML e non solo testo.

Answer 1

per rendere html all'interno del template da un'altra funzione, è necessario utilizzare il {{html}} tag modello.

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

Si dovrebbe anche spostare la funzione htmlDetail al di fuori della vostra funzione pronta()

Answer 2

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

Nota questo sono la versione beta comunque in modo che non siano finalizzati e molto probabilmente potrebbero cambiare o addirittura essere deprecato in modo da non fare affidamento su che troppo di come ancora naturalmente, ma fare l'esperimento con esso :)

Answer 3

Tornando alla tua domanda, il problema sembra essere che htmlDetail deve essere definito prima del modello stesso. (I loro esempi 'suggerire' che)

Funziona qui: http://jsfiddle.net/SXvsZ/9/

Answer 4

È possibile passare il una funzione non globale per il modello per renderlo avialbale all'interno del template, se si sceglie di non fare globale.

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

può essere utilizzato in questo modo, {{html}} lo renderà senza codifica

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