Usando jQuery Templates

Esse artigo tem como objetivo explicar como ultilizar a ferramente de templates para jQuery desenvolvida pela Microsoft.

por José Alberto Monteiro Albuquerque

Olá, tudo bem?!

Hoje vamos falar sobre essa fantástica ferramenta quealgumas semanas atrás eu conheci.É plug-in que fornece uma ferramenta de templates que trabalham junto com jQuery, nada mais é que um trecho de código html que é carregado pelo plug-in aplica sobre o mesmo usando uma fonte de dados JSON, para ser mais claro, você define um layout especificando onde cada variável deve aparecer, e o resto ele se vira.
De uma forma muito simples você consegue gera um HTML no cliente usando esse plug-in, a sintaxe usada dentro do template, é o próprio html e algo usando chaves e $, mais a frente verão isso, então vamos aos preparativos:

Arquivos necessários:

• jQuery versão 1.42 clique aqui.
• jQuery template Beta 1 clique aqui.
• jQuery template plus Beta 1 clique aqui.

Vamos ao código

Bom, eu vou seguir o tutorial usando ASP.NET MVC, por que faz sentido para mim, mas nada impede que você use Web Forms, ou até mesmo outra linguagem.

Criando a solução, criei meu projetinho ASP.NET MVC 2 Web Application e adicionei os 2 scripts a minha pasta de script, como você pode ver na figura 1.

Logo sem seguida adicionei a referencia dos scripts na minha master page(figura 2), se você não quiser usar os scripts na sua máquina, você pode usar o CDN da Microsoft que prove todos os recursos utilizados aqui nesse tutorial, para quem quiser o link, clique aqui.

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmplPlus.min.js" type="text/javascript"></script>

Próximo passo foi criar a div ListaPessoa e dentro dela a tabela que vai receber os dados logo em seguida dentro de uma tag SCRIPT adicionou o meu template. Veja o código.

Como vocês podem ver, a minha table é comum, a novidade ai é o template, que possui um html normal e uma sintaxe composta de chaves {} e cifrões $.
Agora o próximo passo é escreve o código da ação de clicar no botão, e trazer os dados para nossa tabela, veja o código abaixo.

O método $.getJSON possui a sintaxe: $.getJSON( URL , DADOS, CALLBACK), como eu não precisei passar nenhum dado, eu simplesmente omiti esse parâmetro, passando somente a URL e a minha função de CALLBACK, que recebe 1 parâmetro, no qual eu chamei de JSON, e como o próprio nome da variável diz, é uma fonte de dados JSON que foi retornada da ação Pessoas que está no controller Home. A extensão tmpl pode receber até 3 parâmetros, mas por enquanto vamos tratar só de um. Esse método ele retorna o HTML, e com ele faço o que bem entender, nesse exemplo, jogo esse html com o appendTo, dentro da minha tabela que está dentro da div ListaPessoa, que é exatamente o que "#ListaPessoa table" passa, se tivéssemos mais de uma tabela dentro de ListaPessoa, todas elas seriam afetadas pelo nosso comando appendTo.

Agora basta só mostrar a codificação da Action Pessoas:

E por final, temos nosso projeto rodando 100%, quem quiser baixar o link está no fim do post! E isso ai até mais :)

Para fazer o download use o link abaixo:
jQueryTemplate.rar