Plugin jQuery para criação de Templates

Com o plugin de criação de templates jQuery, você poderá dar asas à sua criatividade e imaginação e fazer criações de alta qualidade e que cativam o olhar de “quem passa”. Os usos que poderá dar a este plugin, vão desde a criação de templates para mostrar tweets, feeds, ou outro tipo de conteúdo com que você queira trabalhar. Não perca este fantástico Plugin jQuery Para Criação de Templates!

1º PASSO

Para começar temos de importar o jQuery e o plugin de criação de templates.

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

2º PASSO

Agora é altura de criar o seu template. Neste tutorial vamos utilizar o plugin orientado para o twitter.

<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>

3º PASSO

Neste passo temos de introduzir dados para o nosso plugin. Vamos fazer uma pesquisa rápida com a ferramenta de pesquisa da API do Twitter.

<script>

 $.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=escolacriativ',

    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>

4º PASSO

Renderização do Markup – onde? Para definir isso, criaremos uma lista não ordenada.

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

5º PASSO

Neste passo misturamos os ingredientes e criamos o bolo. Inserimos os dados no template e anexamos à lista não ordenada que criámos no 4º passo.

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

Para melhor compreensão, deixamos aqui o código completo. Este tutorial tem como base um artigo dos colegas na Nettuts.

<!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> Tweets da Escola Criatividade! </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=escolacriativ',

            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>