Trabajar con jQuery es muy fácil, para aquellos que no conocemos javascript a fondo la utilización del famoso Framework fue prácticamente una bendición.
Ocasionalmente tendremos que trabajar embebiendo diseño en medio de nuestros scripts, algo que vuelve nuestros códigos menos legibles y aumentan la complejidad, si el html a embeber es amplio difícilmente podremos mantener reducido el tamaño de nuestros archivos js, algo claramente negativo.
Para evitar este problema en jQuery podemos trabajar con plantillas, por ejemplo para mostrar listas, o bien tablas, sin ensuciar para nada nuestro código manteniendo por separado diseño de programación, para facilitarnos la vida existe en libre descarga el plugin jQuery.tmpl().
Lo que hace el plugin es recibir por un lado la plantilla HTML, por otro la información y finalmente algunos parámetros de configuración. La forma es similar a:
jQuery.tmpl( template, [ data ], [ options ] )
Un ejemplo completo de implementación sería el siguiente:
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
</script>
<ul id="movieList"></ul>
Esto da como resultado una lista completa con las películas que enviamos desde la variable movies.
El plugin es muy completo, entre sus opciones disponibles existe la posibilidad de obtener la información desde un medio externo, esto lo logramos utilizando la función ajax de jQuery que permite importar resultados con formato json. De esta forma vamos a tener el código mucho más limpio y fácil de actualizar.
jQuery.tmpl() cuenta con una documentación muy completa, y se podría decir que es la solución más simple a la hora de trabajar con plantillas desde jQuery. Les recomiendo mirar el resto de ejemplos desde la pagina oficial para evitar escribir código innecesario y ya disponible desde el plugin original.
