News At A Glance / Self-Training

jquery-tmpl (templates)

jQuery plug-in: jquery-tmpl

(*)Aclaración
Es conveniente aclarar que el equipo de jQuery ha decidido no hacer uso de este plugin ya que no está siendo activamente desarrollado o mantenido desde hace un tiempo ya. Cuando se comenzó a utilizar en el self training no se tenía conocimiento de esto pero de todos modos, para el uso que se le dió, fue útil y funcionó correctamente.

Uso en News At A Glance

(*) News at a Glance en GitHub

Situación planteada

Se necesitaba poder contar con templates para los diferentes tamaños de ’tiles’ que debía mostrar, y manejar, la aplicación (small, medium y large) para los diferentes tipos de información mostrada (noticias, equipos y videos publicitarios)

Resolución usando jquery-tmpl plugin

  1. Descargar e incluir en el proyecto el plugin:
    <script src="@Url.Content("~/Scripts/Libs/jQuery.tmpl.min.js")" type="text/javascript"></script>
  2. Agregar un archivo html para cada tipo de información a mostrar (noticias, equipos, videos). En nuestro caso, para las noticias, se agregó News.html.
  3. Dentro de cada archivo incluir los 3 templates, 1 para cada tamaño de tile considerado: small, medium y large. El tag principal del template debe tener la siguiente forma:
    <script id="NewsTemplate_Small" type="text/x-jquery-tmpl">

    (template para noticia tamaño small)

  4. Ahora, usando $(“#myTemplate”).tmpl([data]) se indica que el template correspondiente se bindeará con determinada data (puede ser algún JavaScript type, incluyendo Array u Object).
    En la app:

    var template = $('#' + tileName + 'Template_' + size); //se obtiene el template
    template.tmpl(data); //se bindea la data correspondiente
  5. Para identificar los valores a tener en cuenta al momento de renderizar la data sobre el template se debe considerar la siguiente sintaxis en la definición del template: <span id=”spNewsSource”>${Source}</span>. Con el template tag: “${Source}” se indica que la data pasada por parametro tendrá una property llamada “Source” con un value que será renderizado sobre el <span> en cuestión. Se puede bindear de esta forma ya sea el value de un span como la property ref en un anchor <a id=”lnkNews” href=”${Url}”, el source de una imagen, los ids de elementos html, etc. Ver documentación para los varios template tags: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} {{wrap}}.
  6. El método $.tmpl() retorna una jQuery collection y es diseñado para encadenar con .appendTo, .prependTo, .insertAfter or .insertBefore, como en este ejemplo: $.tmpl(“<li>${Name}</li>”,{“Name” : “John Doe”}).appendTo(“#target”).
    En la app, el valor retornado por este método, se utilizó de la siguiente manera: tileDiv.html(template) (Para el div del tile en cuestión se define la property html usando el template).

Conclusión

El plugin permitió una gran comodidad y facilidad para mostrar, bindear y manejar templates previamente definidos sobre los cuales debía mostrarse diferente información, dependiendo del tamaño del template, de manera dinámica (en el momento de la obtención de la noticias).

Advertisements

2 thoughts on “jquery-tmpl (templates)

  1. Pingback: MakingSensers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s