Na dieta diária do desenvolvedor front-end sempre esteve presente uma saladinha de HTML com JavaScript. Principalmente quando precisamos implementar um código com funcionalidades AJAX. Por exemplo, imagine que o bloco abaixo representa o retorno de um getJSON() da vida:
for( i in noticias ) { html = '<li><h3>' + noticias[i]['titulo'] + '</h3>'; html += '<span class="data">' + noticias[i]['data_publicacao'] + '</span>'; html += '<span>' + noticias[i]['chamada'] + '</span>'; html += '<span><a href="' + link + '">Veja mais</a></span></li>'; } $('#noticias').append( html );
O problema do código acima é que ele é pouco reutilizável e de baixa legibilidade, além de ser muito chato de digitar e prestar manutenção, com todas as concatenações e índices. Foi pensando nisso que o pessoal da Microsoft desenvolveu o plugin jQuery.tmpl() (tmpl de template, é claro), aceito recentemente na API oficial do jQuery.
Mas não confunda template com separar o JavaScript do HTML no sentido “físico” da coisa (colocando tudo que é JS em arquivos externos, outra boa prática para desenvolvedores). Neste texto você aprende a utilizar blocos de código HTML nas suas interações via jQuery, substituindo variáveis por conteúdos de saída/retorno.
Definindo seu template
Quem já trabalhou ou já viu algum tipo de implementação de templates não vai ter muitas dificuldades para se adaptar à forma de templating do jQuery. O conceito básico é definir um modelo padrão para um bloco de código e trabalhar com substituição de variáveis. O template do bloco mostrado anteriormente seria o seguinte:
var tpl_noticia = '<li><h3>${titulo}</h3><span class="data">${data_publicacao}</span><span>${chamada}</span><span><a href="${link}">Veja mais</a></span></li>';
Abaixo você confere uma chamada simples para nosso template. (Note que os dados de exemplo estão armazenados em um objeto JSON.)
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/', } ]; $(function(){ // aplica o template tpl_noticias aos dados e adiciona a lista ao elemento ul $.tmpl( tpl_noticia, noticias ).appendTo( 'ul#noticias' ); });
Além do .appendTo(), você pode ainda utilizar os seguintes métodos para trabalhar co templates: .prependTo(), .insertAfter() e .insertBefore().
Tipos de dados
${var}
Provavelmente a que você vai utilizar com mais frequência. Representa variáveis ou expressões JavaScript, é um atalho para {= expr/var}.
var tpl = '<li>${nome}</li>'; // exemplo de expressão var tpl = '<p class="">${formataData( data_publicacao )}</p>'; var formataData = function( sdata ) { var meses = { 1 : 'Janeiro', 2 : 'Fevereiro', 3 : 'Março', 4 : 'Abril', 5 : 'Maio', 6 : 'Junho', 7 : 'Julho', 8 : 'Agosto', 9 : 'Setembro', 10 : 'Outubro', 11 : 'Novembro', 12 : 'Dezembro' }; var mes = parseInt( sdata.substr( 3, 2 ), 10 ); var dia = sdata.substr( 0, 2 ); var ano = sdata.substr( 6, 4 ); return dia + ' de ' + meses[mes] + ' de ' + ano; };
{{each}}{{/each}}
Define um loop entre elementos de um array ou objeto javascript, dentro do escopo do template. Assim como a tag para expressões, também aceita métodos para tratar o valor. Suas variáveis internas são $index e $value (chave e valor do array/objeto, respectivamente).
var tpl_artigo = '<p><h3>${titulo}</h3>{{each autores}}${$value.toUpperCase()}<br />{{/each}}</p>'; var artigos = [ { titulo: 'Javascript & Acessibilidade', autores: ['Davi Ferreira', 'Letícia Stallone'], abstract: '<strong>Acessibilidade e Javascript</strong>', }, { titulo: 'Humor no Javascript', autores: ['Letícia Stallone'], abstract: '<strong>Javascript pode ser bem engraçado</strong>', }, { titulo: 'Boas práticas', autores: '', abstract: '<strong>Boas práticas de desenvolvimento web</strong>', } ];
{{if}}{{else}}{{/if}}
Implementa condicionais dentro do template. Executa (ou não) uma determinada condição, baseada no valor/retorno da variável/expressão. Esta tag interpreta como false qualquer valor nulo, 0 ou undefined.
var tpl_artigo = '<li><h3>${titulo}</h3>{{if autores.length}}Autor(es): {{else}}sem autor cadastrado{{/if}}{{each autores}}${$value.toUpperCase()}<br />{{/each}}</li>';### {{html}} Caso você tente dar a saída no template de um conteúdo com tags HTML o jquery.tmpl() vai transformar as marcações em texto puro. Para que a saída aconteça também em HTML é necessário utilizar a tag especial {{html}}.
var tpl_artigo = '<li><h3>${titulo}</h3>{{if autores.length}}Autor(es): {{else}}sem autor cadastrado{{/if}}{{each autores}}${$value.toUpperCase()}<br />{{/each}}{{html abstract}}</li>';
Deu pra perceber a potencialidade deste plugin para aplicações mais elaboradas, com diversas interações via AJAX? Você pode ter um .js só para seus modelos e parar de concatenar tudo e todos diretamente no código. As tags são bastante flexíveis, permitindo tanto variáveis simples como expressões mais avançadas.
Na parte 2 deste artigo veremos como implementar os templates com caching e ainda as tags avançadas {{wrap}} e {{tmpl}}.