Usando jQuery Templates 1


E ai galera, tudo bem?!
Precisei quebrar a linha de posts sobre o Cliente Twitter, o TweNet, para falar sobre essa fantastica ferralmente que algumas semanas atrás eu conheci. É pluguin que fornece uma ferramenta de templates que trabalham junto com jQuery, nada mais é que um trecho de codigo html que é carregado pelo pluguin aplica sobre o mesmo usando um fonte de dados JSON, para ser mais claro, voce define um layout especificando onde cada variavel deve aparecer, e o resto ele se vira.
De uma forma muito simples você consegue gera um HTML no cliente usando esse pluguin, a sintaxe usada dentro do template, é o proprio html e algo usando chves e $, mais a frente veremos isso, então vamos aos preparativos:

Arquivos necessários:

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.

Figura 1.Imagem da solução apos inclusão dos jQuery Template

Logo sem seguida adicionei a referencia dos scripts na minha master page(figura 2), se você não quiser usar os scripts na sua maquina, você pode usar o CDN da Microsoft que prove todos os recuros ultilizados 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>

Figura 2. Scrips referenciados na MasterPage

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

Figura 3. Código do template e a table

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

Figura 4. Evento click do botão executando o template

O método $.getJSON possui a sintaxe: $.getJSON( URL , DADOS, CALLBACK), como eu não precisei passar nenhum dado, eu simplesmente omiti esse paramentro, passando somente a URL e a minha fucnção de CALLBACK, que recebe 1 parametro, no qual eu chamei de JSON, e como o proprio 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 parametros, mas por enquanto vamos tratar so 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 tivessemos mais de uma tabela dentro de ListaPessoa, todas elas seriam afetadas pelo nosso comando appendTo.

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

Figura 5. 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 🙂

Figura 6. Projeto finalizado


jQueryTemplate.rar


sobre Alberto Monteiro

Desenvolvedor no Grupo Fortes, cuja principal área de conhecimento são em tecnologias Microsoft, como Windows Forms / Services, WPF, ASP.NET(MVC/WEB API), Windows Phone, EF. Gosta de sopa de letrinhas(SOLID, DDD, TDD, BDD, IoC, SoC, UoW), possui aplicações de Windows Phone publicadas no marketplace, já contribuiu no jQuery UI. Atualmente trabalha com ASP.NET MVC / Web API, Windows Azure, Amazon AWS, jQuery/UI, Knockout, EF, Ninject, AutoMapper, Restfulie, SignalR, KendoUI.

  • Muito bacana o post. Realmente a ferramenta é muito bacana.

    Abraços!