Tableless

Busca Menu

Templates e jQuery – parte 2

Seja o primeiro a comentar por

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 = ‘<li><h3>${titulo}</h3><span class=”data”>${data_publicacao}</span><span>${chamada}</span><span><a href=”${link}”>Veja mais</a></span></li>’;

$.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”]
<script id=”tpl-noticia” type=”text/x-jquery-tmpl”>
<li>
<h3>${titulo}</h3>
<span class=”data”>${data}</span>
<p class=”chamada”>${chamada}</p>
<a href=”${link}”>Leia mais</a>
</li>
</script>
[/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”]
    <script id=”tplNoticia” type=”text/x-jquery-tmpl”>
    {{wrap “#tableNoticia”}}
    <h2>Notícia 1</h2>
    <p><a href=”noticia-1″>Chamada da notícia 1</a></p>
    <h2>Notícia 2</h2>
    <p><a href=”noticia-2″>Chamada da notícia 2</p>
    {{/wrap}}
    </script>

    <script id=”tableNoticia” type=”text/x-jquery-tmpl”>
    <table>
    <tbody>
    <tr>
    {{each $item.html(“h2”, true)}}
    <td>
    ${$value}
    </td>
    {{/each}}
    </tr>
    <tr>
    {{each $item.html(“p”)}}
    <td>
    {{html $value}}
    </td>
    {{/each}}
    </tr>
    </tbody>
    </table>
    </script>

    <div id=”noticias”></div>

    <script>
    $(function(){
    $(“#tplNoticia”).tmpl().appendTo(“#noticias”);
    });
    </script>
    [/cce]

    No código acima utilizamos a tag {{wrap}} para popular dados em uma tabela. A primeira linha (<tr>) da tabela recebe os títulos do nosso template de notícias – tudo o que estiver entre a tag <h2>. 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”]
    <script id=”tplNoticia” type=”text/x-jquery-tmpl”>
    {{tmpl “#tplTitulo”}}
    <p class=”chamada”>${chamada} <a href=”${link}”>Leia mais…</a></p>
    </script>

    <script id=”tplTitulo” type=”text/x-jquery-tmpl”>
    <h2>${titulo}</h2>
    <span class=”data”>${data_publicacao}</span>
    </script>

    <div id=”noticias”></div>

    <script>
    $(function(){
    $( “#tplNoticia” ).tmpl( noticias ).appendTo( “#noticias” );
    });
    </script>
    [/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.

    Publicado no dia