2011-01-19 12 views
5

Estoy tratando de aprender más sobre las plantillas jQuery pero no puedo ejecutar ninguna llamada JS dentro de la plantilla.jQuery Template - Ejecutando el código JS dentro de la plantilla

<script id="log-item" type="text/x-jquery-tmpl"> 
{{if title.length }} 
    <h3 style="padding-bottom:5px;">${ title }</h3> 
{{/if}} 
objectToString(${ detail }); 
</script> 

Tenga en cuenta que nunca se llama a mi función objectToString(), simplemente se representa como una cadena. Intenté envolverlo en {{}} por capricho, pero sin suerte. ¿Alguien por ahí que puede ayudar?

Respuesta

8

Anthony, puedes. El método que necesita su llamada debe estar dentro de una etiqueta de plantilla así:

<script id="log-item" type="text/x-jquery-tmpl"> 
{{if title.length }} 
    <h3 style="padding-bottom:5px;">${ title }</h3> 
{{/if}} 
<p> 
    Detail: ${ objectToString(detail) } 
</p> 
</script> 
+0

Eso es más como lo que estaba buscando. Podría haber jurado que intenté esto. Pero sí, esto se ve perfecto –

+0

+1 - Lo usé para buscar un trabajo agradable y variable. ahora buscando incrementos y decrementos: D –

2

No estoy seguro de dónde está ubicado su objectToString, pero si ve la referencia here, verá que agregan la función auxiliar necesaria en .tmpl (método).

Aquí es un ejemplo ... Traté de hacer que sea similar a lo que tiene en la pregunta ...

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Test jquery Templates</title> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 
    <script type='text/javascript' src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 
    <script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}} 
     <h3>${title}</h3> 
     <p>Detail: ${$item.objectToString("detail")}</p> 
    {{/if}} 
    </script> 
    <div id="bookList"></div> 
    <script type='text/javascript'> 
    $(function(){ 
     var book = [ 
     { title: "Goodnight, World!", 
      detail: { author: "Jojo Mojo", synopsis : "What the ..." }}, 
     { title: "Rainbow", 
      detail: { author: "Cookie", synopsis : "Huh?" }} 
     ]; 

     $("#testTemplate").tmpl(book, { 
     objectToString : function(key) { 
      var detail = this.data[key]; 
      return detail.author + " " + detail.synopsis; 
     } 
     }).appendTo("#bookList"); 
    }); 
    </script> 
</body> 
</html> 

Se puede ver here.

+0

De hecho, esta fue la respuesta. Tan loco como parece. ¿Por qué no puedo simplemente llamar a las funciones de JavaScript en la plantilla? –

Cuestiones relacionadas