Una de los plugins que más me gustan de jQuery son las Microsoft jQuery Templates, y en resumen con este plugin lo que podemos realizar es crear HTML dinámico en el cliente, en este primer post voy a mostrar un ejemplo bastante sencillo para entender cual es la filosofía de este plugin y como trabajarlo, pero vendrán al menos dos artículos más en los cuales vamos a ir extendiendo y complementando este tema.

Así que iniciemos:

1. Archivos JavaScript

Para poder trabajar con estos templates, debemos agregar al menos dos archivos JavaScript, el primero será el plugin de jQuery y e segundo será el archivo propio del plugin, y por supuesto referenciarlo en nuestra página:

1: <scriptsrc="js/jquery-1.7.1.js"type="text/javascript">script> 2:

4. Enlazando datos

Y llego el momento de enlazar datos a la plantilla, esto lo realizamos con código cliente, y en este primer post vamos a tener datos fijos (en el siguiente vamos a usar datos desde una base de datos, usaremos Entity Framework, Linq y plantillas T4), entonces el código sería:

1:

Lo interesante del código, primero validamos que la página este lista (línea 2), recuerda que desde jQuery 1.7 utilizamos on (si no lo sabes mira este link), luego declaramos la variable datos la cual contiene 4 registros (línea 3 – 8) para hacerlo sencillo, y finalmente en la línea 9 a la plantilla (ver paso 3) utilizando el método tmpl le asignamos la fuente de datos y se lo añadimos a nuestra tabla (ver paso 2)

Una vez listo, al ejecutar el ejemplo vamos a tener algo así:

Imagen1

Espero les haya gustado el post, como les comente antes en el próximo artículo vamos a realizar otro ejemplo un poco más complicado, ya que los datos los vamos a traer desde una base de datos, vamos a utilizar Entity Framework, generaremos unas plantillas T4, usaremos Linq para realizar consultas y un WebService para comuniciar el cliente con el servidor…

Como siempre les dejo el ejemplo para su descarga:

Descarga el ejemplo!