Introducción a JQuery Template plugin jquery.tmpl.js

Categorías: JQuery, Plugins jQuery - Tags: JQuery, jquery.plugin, jquery.tmpl.js

Hace poco el equipo de JQuery anuncio que el plugin de templates de Microsoft es ahora soportado oficialmente. Esto quiere decir que el propio equipo de JQuery se va a encargar de su desarollo y actualizaciones. A continuación les explico como integrarlo y usarlo de una forma sencilla.

Para este ejemplo vamos a utilizar mis últimos tweets en Twitter de manera que sirvan para rellenar el template que vamos a crear previamente.

1. El primer paso es integrar JQuery y el plugin de templates

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.tmpl.js"></script>

2. Creamos el template

<script id="tweets" type="text/x-jquery-tmpl">
	<li>
		<img src="${imgSource}" alt="${username}" />
		<h2> ${username} </h2>
		<p> ${tweet} </p>
		{{if geo}}
		<span> ${geo} </span>
		{{/if}}
	</li>
</script>

Cabe destacar que:

Nuestro template se encuentra dentro de las tags <script> y el type usado es text/x-jquery-tmpl
Las variables tienen el siguiente formato ${nombreDeVariable}
Se pueden crear sentencias if de la siguiente manera {{if condicion}} sentencia a ejecutar {{/if}}

3. Buscamos algun dato para renderizar en nuestro template

En este caso usando la SEARCH API de Twitter obtenemos los últimos resultados donde mencionan mi cuenta de twitter.

<script>
 
 $.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=chifliiiii',
 
    success : function(tweets) {
       var twitter = $.map(tweets.results, function(obj, index) {
          return {
             username : obj.from_user,
             tweet : obj.text,
             imgSource : obj.profile_image_url,
             geo : obj.geo
          };
       });
    }
});
 
</script>

Como veran usamos las variables definidas en el paso anterior para almacenar los varoles devueltos.

4. Creamos el espacio donde actuara nuestra template

Si recuerdan nuestra template no era más que un elemento <li> de una lista desordenada. Por lo que debemos crear dicha lista.

1	<ul id="tweets"> </ul>

5. Enlazamos los datos al template y lo introducimos a la lista

1	$('#tweets').tmpl(twitter).appendTo('#twitter');

Seleccionamos el script (template) con id = tweets
Le pasamos el array twitter creado con .map al template
Añadimos lo anterior a la lista con id twitter

Y con eso ya estaría todo en su sitio de manera que todo junto quedaría de la siguiente forma:

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style.css" />
 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="jquery.tmpl.js"></script>
   </head>
   <body>
 
      <h1> Algunos tweets de mi cuenta </h1>
 
      <script id="tweets" type="text/x-jquery-tmpl">
         <li>
            <img src="${imgSource}" alt="${userName}" />
            <h2> ${username} </h2>
            <p> ${tweet} </p>
 
            {{if geo}}
            <span>
               ${geo}
            </span>
            {{/if}}
         </li>
      </script>
 
      <ul id="twitter"></ul>
 
      <script>
         $.ajax({
            type : 'GET',
            dataType : 'jsonp',
            url : 'http://search.twitter.com/search.json?q=chifliiiii',
 
            success : function(tweets) {
               var twitter = $.map(tweets.results, function(obj, index) {
                  return {
                     username : obj.from_user,
                     tweet : obj.text,
                     imgSource : obj.profile_image_url,
                     geo : obj.geo
                  };
               });
 
               $('#tweets').tmpl(twitter).appendTo('#twitter');
            }
      });
 
      </script>
   </body>
</html>

Un saludo y hasta la proxima!!!

Via | Nettuts+

Acerca del autor

by Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. Wordpress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme: