Conhecendo o JQuery Template

JQuery

Se você já teve que fazer um código gigante de manipulação DOM com JQuery para criar, por exemplo, uma tag sobre outra tag que precisa incluir uma outra tag de forma dinâmica e executando tudo dentro de um loop imenso, tudo isso para gerar um resultado parecido como este aqui:

Resultado DOM gerado via JQuery:

<tr>
   <td>
      <label>Usuario 1: <input type="text" name="usuario[1]"></label>
   </td>
</tr>
<tr>
   <td>
      <label>Usuario 2: <input type="text" name="usuario[2]"></label>
   </td>
</tr>
...

Mas fazendo um código JQuery monstruoso como este abaixo:

$(function(){
   for(var i = 1; i <= 4; i++){
      var input = $('<input />', {'type': 'text', 'name':'usuario['+i+']'});
      var label = $('<label />').text('Usuario '+i+':').append(input);
      var td = $('<td />').append(label);
      var tr = $('<tr />').append(td);
      $('tbody').append(tr);
   }
});

Ou até de uma maneira melhorada, porém não sendo uma boa prática, você pode até fazer assim:

$(function(){
   for(var i = 1; i <= 4; i++){
       var usr += "<tr><td>";
       usr += "<label>Usuario "+i+": <input type='text' name='usuario["+i+"]'></label>";
       usr += "</td></tr>";
   }
   $('tbody').append(usr);
});

Saiba que existe uma maneira prática e que deixa o seu código mais claro e objetivo, para isso será necessário adicionar o plugin: JQuery Template.

O seu uso é simples, após adicioná-lo em seu HTML, será necessário criar uma tag script mas que utiliza o seu próprio atributo: type=”text/x-jquery-tmpl” e dentro dela, você adiciona o template de resultado, incluindo também as variáveis que virão de um objeto JSON. Veja abaixo como ficaria o template e o seu respectivo código JQuery:

Template:

<script type="text/x-jquery-tmpl" id="usuarioTemplate">
   <tr>
      <td>
         <label>Usuario ${index}: <input type="text" name="usuario[${index}]" /></label>
      </td>
   </tr>
</script>

Código JQuery para manipular o template:

$(function(){
   for(var i = 1; i <= 4; i++){
       var usuarioJSON = {index : i};
       var template = $('#usuarioTemplate').tmpl(usuarioJSON);
       $('tbody').append(template);
   }
});

Outras funcionalidades interessantes do plugin é a possibilidade de manipular o template como, por exemplo, comandos de condicional {{if}} {{else}} {{/if}}, comandos para loop {{each}}{{/each}} e muito mais é apresentado em sua documentação.

Conclusão, com JQuery Template você poderá criar templates de forma controlada, gerando menos códigos complexos de manipulação DOM, tudo isso através de objeto JSON + Tag Script do JQuery Template.

Uma observação interessante a citar, é que se você utilizá-lo dentro de um JSP que utilize JSTL, poderá ocorrer um conflito com o template, pois ambos utilizam a mesma síntaxe para variável: ${variavel}, para resolver isso basta apenas dar um escape nas variáveis do JQuery Template para o JSTL ignorá-las, ou seja, adicione uma barra invertida antes da variável: ${variavel_com_escape}

Para conhecer melhor o plugin, acesse os links:

JQuery API: http://api.jquery.com/jquery.tmpl/
Github do plugin: https://github.com/jquery/jquery-tmpl
Documentação: http://api.jquery.com/category/plugins/templates/

6 respostas para Conhecendo o JQuery Template

  1. Estou procurando a algum tempo… Da para colocar o resultado em uma variavel antes de exibir

  2. I was thinking to visit your website man. It looks really gr8. But for me I could view it only. I don’t know your language. by the way, what is your language brother.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>