Templates client-side com Mustache.js

Antes de começarmos, uma pergunta: quem nunca implementou um “template” nos moldes do código abaixo? Se você ainda faz isso, chegou a hora de parar. Neste artigo abordaremos a implementação JavaScript para templates Mustache. A sintaxe já foi portada para diferentes linguagens, incluindo Ruby, Python, PHP e Java. Para uma lista completa, visite o site

Antes de começarmos, uma pergunta: quem nunca implementou um “template” nos moldes do código abaixo?

Se você ainda faz isso, chegou a hora de parar.

Neste artigo abordaremos a implementação JavaScript para templates Mustache. A sintaxe já foi portada para diferentes linguagens, incluindo Ruby, Python, PHP e Java. Para uma lista completa, visite o site oficial do projeto.

A principal diferença do Mustache para outras formas de templating no client-side (jQuery Template, por exemplo) é que ele não aceita lógica, como declarações condicionais, loops etc. Pode não parecer, mas isso é muito bom: um template não deveria conter nenhuma lógica, já que é apenas uma camada de apresentação.

Por ser “logic-less”, o Mustache.js é bem enxuto, pesando 8.5kb em sua versão minificada.

Criando um template

Os templates Mustache esperam receber dados no formato JSON. Os dados podem ser textos, variáveis e até mesmo funções. Vamos começar com um exemplo básico onde renderizamos um template de um artigo.

O método render é o responsável por retornar o template com os dados formatados. O primeiro parâmetro é o template e o segundo o objeto JSON com os dados que devem ser aplicados.

Os dados armazenados no JSON são representados no template utilizando duas chaves (bigode-bigode) com o nome da propriedade.

Uma boa prática é separar o template do seu código JavaScript armazenando a estrutura do template em uma tag script do tipo “text/template”.

Os dados do template são utilizados buscando o conteúdo HTML da tag.

Nos exemplos a seguir, para facilitar a leitura, vamos continuar utilizando os templates diretamente no método render do Mustache.

Lógica?

É verdade que não existem tags para condicionais e loops, mas sua implementação é possível utilizando caracteres especiais nas tags do template.

No exemplo abaixo temos um objeto tableless que armazena um conjunto de artigos. Para realizarmos um loop nos artigos, basta utilizar o caractere ‘#’ seguido do nome da propriedade como uma tag do nosso template. Dentro do bloco #artigos temos acesso às propriedades de cada artigo.

A lógica de condicionais é tratada no próprio objeto. Assim como o loop acima, basta adicionarmos o caracatere ‘#’ a uma variável booleana para exibir ou não um conteúdo de acordo com o valor da mesma:

Funções

As tags podem conter funções como valores. Por exemplo, no objeto abaixo, a função buzz soma a quantidade de likes, tweets e comentários de um artigo.

Quando o valor de uma tag é representado por uma função e o caractere ‘#’ é utilizado, a mesma pode retornar uma outra função que recebe dois parâmetros: o texto do bloco do template e uma versão especial do método render para ser executada no contexto do bloco.

Esse tipo de função é chamado de helper, podendo conter lógicas exclusivas da view e evitando a repetição de trechos de template comuns.

Parciais

Outra maneira de evitar repetição é utilizando templates parciais. Parciais são referenciados com o caractere ‘>’ dentro da tag.

Os templates parciais devem ser informados como terceiro parâmetro do método render e seu valor deve ser um objeto contendo um ou mais templates. A chave informada no objeto é o nome da tag que será utilizada no template principal.

E tem mais

Além das funcionalidades apresentadas neste artigo, a biblioteca Mustache.js ainda trás alguns outros benefícios como templates compilados, delimitadores personalizados e seções invertidas. Para saber mais, visite a página do projeto no GitHub.

E você? Utiliza alguma solução de templating no client-side? Compartilhe nos comentários!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *