función de JavaScript dentro de la plantilla de jquery

Question

Parece que tengo algunos problemas para llamar a una función de JavaScript dentro de una plantilla de jquery. Tengo puse una demo aquí: http://jsfiddle.net/SXvsZ/8/

Código se parece a:

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

y la plantilla se ve así:

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

parece que debería hacer "hola mundo " Me gustaría que también represente el HTML como html y no como texto sin formato.

Answer 1

Para representar HTML dentro de la plantilla de otra función, tendrá que utilizar el html {{}} etiqueta de plantilla.

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

También debe mover la función htmlDetail fuera de su función de lista()

Answer 2

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

Nota esto son la versión beta de todos modos por lo que no se han finalizado y muy probablemente podrían cambiar o incluso ser desaprobados por lo que no se basan en que el exceso hasta el momento, pero por supuesto hacer experimentar con él :)

Answer 3

Volviendo a su pregunta, el problema parece ser que htmlDetail debe definirse antes de la plantilla. (Sus ejemplos sugieren 'que)

Funciona aquí: http://jsfiddle.net/SXvsZ/9/

Answer 4

Puede pasar la función mundial de no a la plantilla para que sea avialbale dentro de la plantilla, si elige no hacer es global.

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

que puede ser utilizado como este, {{}} html las puede hacer sin codificación

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