Microsoft JQuery Templates, ejemplo práctico

Ahora que Microsoft JQuery Templates ya es un plugin oficial de JQuery, voy a mostrar un ejemplo sencillo, sobre como ocuparlo.  Este Plugin entrega una facilidad increíble que va a estar incluido en JQuery 1.5.

Mira este artículo para estar más informado:

http://stephenwalther.com/blog/archive/2010/10/04/microsoft-templates-included-in-jquery-1-5.aspx

Entonces , veamos el ejemplo, la idea es generar asíncronamente las siguiente tablas:

 image

Para esto vamos a ir por parte, primero

La creación de la base de datos

Vamos a tener la siguiente definición de tabla:

image

Los datos en la tabla son los siguientes:

image

Con el correspondiente Contexto en Linq:

image

Creación del Servicio Web

Ya hemos creado este tipo de servicios web, vamos a devoler un objeto JSON, para esto vamos  a crear primero el WebService:

  <WebMethod()> _

    Public Function GetCarreras() As List(Of Carrera)

        Dim contexto As New ModeloDataContext

        Dim lista = From p In contexto.Carreras Order By p.Nombre Ascending

        Return lista.ToList

    End Function

Llamada al servicio: Pagina demo.htm

La llamada a este  servicio web, la vamos a hacer mediante JQuery, para esto, utilizamos el código que ya nos es familiar en el cual hacemos:

  1. Llamada a la librería jQuery
  2. Llamada a libería JQuery Templates
  3. Llamada a WebService GetCarreras
  4. Adjuntar mediante la plantilla carTemplate, la colección que retornó el WS (carreras) a el div carreraList

<script type="text/javascript"

src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script
>

 

<script type="text/javascript">

       $(document).ready(function() {

          $("#Boton").click(function(){

           $.ajax({

             type: "POST",

             url: "WSMobile.asmx/GetCarreras",

             data: "{}",

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: function (response) {

               var carreras= response.d;

               $("#carTemplate").tmpl(carreras).appendTo("#carrerasList");

             }, 

               failure: function (msg) {

                   alert(msg);

               }

 

           });

        });

       });

    

</script>

El Div carrerasList no es más que un div normal de la siguiente manera:

<div id="carrerasList"></div> 

La plantilla carTemplates, corresponde a el Dom que hará de sección repetitiva por cuantas objetos carrera se obtengan de la colección carreras. Esta plantilla debe estar dentro del tag <script id="carTemplate" type="text/x-jquery-tmpl">

Plantilla completa

  <script id="carTemplate" type="text/x-jquery-tmpl">

     <table style="width:38%;" border="1px">

        <tr BgColor="#CCFFCC">

            <td style="width:25%;">Carrera</td>

            <td style="width:25%;">Nombre</td>

            <td style="width:25%;">Semestres</td>

            <td style="width:25%;">Foto</td>

        </tr>

        <tr>

            <td>${IdCarrera}</td>

            <td>${Nombre}</td>

 

            <td BgColor="{{if (Semestres >8)}}

                             #BBCCAA

                        {{else}}

                              #00EE11

                        {{/if}}">

            ${Semestres}</td>

            <td><img src="img/${Foto}" /></td>

        </tr>

     </table>

     <p>

   </script>

La forma de la tabla sería:

image

Como puedes ver tengo una tabla con cierto formato dentro de la plantilla, esta tabla se repetirá tantas veces como carreras existan en la BD. Es una muy sencilla forma de Iterar y generar DOM Dinámico.

También incluí los una sentencia IF que es soportada por las plantillas, como puedes ver, realiza el cambio de fondo de la celda en donde está el semestre, si es que la carrera dura más de 8 semestres.

 

Así de fácil, espero que te sirva:
Gonzalo

9 comentarios sobre “Microsoft JQuery Templates, ejemplo práctico”

  1. Hola, estoy trabajando con este plugin y me he dado cuenta de que al cargar la página si ves el código fuente no se muestran los datos generados, tan sólo el template.

    Pero como podría hacer si necesito acceder a esos datos, en tu ejemplo que pasaría si agrego un botón a esa tabla para editar datos.

    He tratado de recorrer el div dónde supuestamente están los datos pero sin exito.

    Espero me haya dejado entender.

    Saludos y buen post!

  2. Hola Eduardo, que tal?
    Tienes razón en que no va se mostrar el código en “ver código fuente”, lo que puedes hacer es asignarle un Id a cada tabla, para que puedas accederla desde jquery con $(“#tabla1″), puedes generar dinàmicamente el nombre :
    id=”tabla${IdCarrera}”
    en la plantilla.
    Saludos,
    Gonzalo

  3. Excelente! Hace tiempo que esperaba esto, y que se incorpore oficialmente a jquery 1.5 mejor aun. Pregunta, también Existe funcionalidad para edición de datos o es readonly ?

  4. Hola Rodrigo!
    Que gusto verte por acá :), para la funcionalidad de edición está el concepto de DataLinker que es otro plugin para JQuery construido por Microsoft :)

  5. Estoy incursionando en este plug-in y viendo que le faltan algunas cosas, nada que no se le pueda poner, como renderizar el template por ajax de forma simple.

    para ver lo generado por el dom les recomiendo el firebug para firefox porque el resto de navegadores da lastima en sus intentos de parecersele, saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *