ASP.NET Ajax Library , Introducción a las nuevas plantillas Client-Side
Ya no es noticia que el team de ASP.NET esté trabajando a toda máquina junto al equipo de jQuery, y que buenos productos se vienen a partir de esta sociedad. Uno de estos son los templates propuestos por el team de ASP.NET al team jQuery, que estan todavía en etapa de revisión, hay mucho feedback que se está recibiendo por parte de la comunidad.
Que son los Client Templates (o plantillas del lado del cliente)
Permiten a los desarrolladores web generar y renderizar HTML UI en el cliente (generalmente esto lo hacemos en el lado del servidor), mediante sintaxis simples permiten programáticamente invocar plantillas en el clienbte y pasar objetos Javascript , como arreglos por ejemplo, a divs específicos enmarcados en los tag propios de la plantilla. Debido a que esto todavía es una propuesta, es posible que la versión final sea diferente de lo que hoy vamos a ver.
Puedes descargar el prototipo en:
http://github.com/nje/jquery-tmpl
Vamos a ver un ejemplo para mostrar los datos de Docentes y sus asignaturas, agregando algunas características de las plantillas.
La idea es obtener el siguiente resultado:
Y como siempre en este Blog…. :)
PASO 1 – Importar las liberías
Debemos importar las librerías jQuery y la librería del template (descarga el prototipo aquí)
<script src="http://code.jquery.com/jquery.js" type="text/javascript"/>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"/>
PASO 2 – Crear la Colección
Esta colección puede venir de un servicio Rest por ejemplo que nos devuelva en notación JSON un o una colección de objetos. En este caso usaremos una colección creada en la misma página:
Como puedes ver, es una colección simple que contiene otra colección de Asignaturas, la cual en el ejemplo de Bernardo, está vacía. (Espero que no se enojen los personajes aludidos :P)
PASO 3 – Crear el Contenedor y la Plantilla
Para esto vamos a crear un contenedor de la Plantilla, pudiendo existir en ella una o más plantillas para renderizar. Ahora viene lo bueno, como ves se utiliza un tag script de tipo texto/html para contener a la plantilla, como se ve n la figura:
Luego vemos unas marcas de tipo {{ = atributo_objeto }}, que hacen referencia a los atributos de la colección que se va renderizando mediante iteración, en este caso, hago un href al atributo URL de cada objeto de la colección, luego concateno nombre y apellido para mostrar el nombre completo en la UI.
A continuación vemos unas sentencias que están en el prototipo de la plantilla, existe el IF, y el each (foreach), acá la idea es que si la persona tiene asignaturas, se muestren en una lista, si no, que muestre el mensaje Sin Asignaturas.
Otr0 punto es que quiero imprimir la cantidad de Asignaturas, para eso no se imprime {{= asignaturas.length}} directamente, si no que hay que utilizar funciones javascript, en el ejemplo se muestra una llamada a la función getCantidad() , la cual tiene el siguiente código:
Obteniendo en cada iteración , mediante el contexto de la llamada (this), el largo de la colección de Asignaturas.
PASO 4 – Agregar el CSS
PASO 5 (y último) – Agregar la Colección a la Plantilla
Paso indispensable (y esta para el último, ejjeje) que nos permite hacer el binding de la colección y la plantilla:
Con esto estamos indicando que se renderize la colección contra plantillaDocente.
PASO 6 (Opcional) – Descarga el ejemplo
Como te diste cuenta puse imágenes en vez de texto,es bastante más rápido postear de esta manera, pero no se puede copiar el código!, por eso la aplicación la puedes descargar acá
Descarga el ejemplo
Espero que te sirva!, recuerda que esto está sujeto a cambios, pero nos da una buena idea de como van a trabajar las plantillas del lado del Cliente.
Muy buena la alianza Microsoft & jQuery!!
Saludos!
Gonzalo