Na primeira parte deste artigo você conferiu uma introdução ao novo plugin .tmpl() que possibilita a utilização de templates para retornos e saídas de suas aplicações jQuery. O plugin certamente é um avanço considerável na organização de código – é o JavaScript ficando cada vez mais profissional e robusto, abandonando a fama de ser uma simples linguagem de script, sem padrões.
A forma mais básica de utilização do plugin .tmpl() é declarar seu template em uma variável e chamá-lo da seguinte forma:
[cce lang=”javascript”]
var noticias = [
{
titulo : ‘Notícia 1′,
data_publicacao : ’28/10/2010 20h31’,
chamada : ‘Chamada da notícia 1’,
link : ‘/noticia-1/’,
},
{
titulo : ‘Notícia 2′,
data_publicacao : ’28/10/2010 20h32’,
chamada : ‘Chamada da notícia 2’,
link : ‘/noticia-2/’,
},
{
titulo : ‘Notícia 3′,
data_publicacao : ’28/10/2010 20h33’,
chamada : ‘Chamada da notícia 3’,
link : ‘/noticia-3/’,
}
];
var tpl_noticia = ‘${titulo}${data_publicacao}${chamada}Veja mais’;
$.tmpl( tpl_noticia, noticias ).appendTo( ‘ul#noticias’ );
[/cce]
Um problema do exemplo acima é que o template acaba ficando confuso dentro de uma variável. Uma outra forma de declarar um modelo seria utilizando a própria tag script, mas com um tipo diferente (text/x-jquery-tmpl):
[cce lang=”xml”]
[/cce]
Dessa forma é possível indentar o template HTML obtendo uma melhor organização/visualização do código.
Caching
Antes de um template ser retornado através do método .tmpl(), ele é tranformado em uma função e depois executado. Uma forma de evitar esta execução toda vez que for retornado o plugin é utilizar o método .template() para criar uma versão em cache, otimizando a performance do script.
[cce lang=”javascript”]
// renderizando como plugin diretamente no objeto jQuery
$(‘#tpl-noticia’).template(‘tplNoticia’);
// associando diretamente a uma variável
var tplNoticia = $(‘#tpl-noticia’).template();
// renderizando passando html/texto como parâmetro
$.template(‘tplNoticia’, ‘
- ${titulo} ‘);
[/cce]
No exemplo acima, a variável tplNoticia armazena a função responsável por nosso template. O método .template() é chamado de duas formas distintas: a primeira cria a função do template baseada no script com o id tpl-noticia. A segunda chamada funciona da mesma forma, só que dessa vez passamos o conteúdo do template diretamente como parâmetro. Lembram do artigo sobre plugins? Então, uma é um método público e a outra um utilitário jQuery.
{{wrap}} e {{tmpl}}
As tags especiais {{wrap}} e {{tmpl}} possuem objetivos bem parecidos. A primeira permite a iteração e inclusão de trechos HTML dentro de um objeto de template. Já a tag {{tmpl}} utiliza, ao invés de trechos HTML, um outro objeto template.
[cce lang=”xml”]
[/cce]
No código acima utilizamos a tag {{wrap}} para popular dados em uma tabela. A primeira linha () da tabela recebe os títulos do nosso template de notícias – tudo o que estiver entre a tag . A iteração é feita através da tag {{each}}, explicada no artigo anterior. O que o exemplo acima faz é buscar todos os elementos H2 no item de template e adicionar o seu conteúdo, sem a tag, na célula da tabela. (Lembrando que você pode utilizar qualquer método jQuery no item de um loop dentro do template.)
Já a segunda linha da tabela recebe a chamada da notícia, preservando suas tags HTML – por isso a utilização da tag {{html}} no valor de cada notícia.
A tag {{tmpl}} é muito útil quando precisamos encadear ou utilizar uma espécie de include dentro de um outro template. No exemplo abaixo, o template para o título e o template da chamada da notícia estão separados. O método .tmpl() recebe apenas o template da chamada.
[cce lang=”xml”]
[/cce]
Como e quando utilizar templates?
Templating é um conceito relativamente novo no jQuery, portanto, algumas funcionalidades ainda podem parecer confusas. Cabe a você decidir qual a melhor forma de definir e converter seus modelos. Por exemplo, se o seu template só vai ser utilizado uma única vez não é necessário utilizar caching (de repente não é necessário nem mesmo utilizar um template!).
Procure organizar bem seu código e pensar sempre em uma possível evolução do projeto – nesse caso, templates vão ser uma mão na roda.