Templates e jQuery – parte 2

Agora que você já sabe como implementar templates em suas aplicações javascript, chegou a hora de conhecer técnicas avançadas de como combinar modelos HTML e scripts jQuery.

por Davi Ferreira 13/12/2010

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.