[download id=”233″]
O Handlebars fornece as funcionalidades necessárias para permitir que você crie modelos semânticos de forma eficaz sem frustração. Ele é amplamente compatível com os templates Mustache e na maioria dos casos, é possível alternar entre os dois sem demais problemas.
Vou falar um pouco sobre o sistema, mas caso você queira saber mais, confira o site oficial do Handlebars no linkhttp://www.handlebarsjs.com e a demonstração ao vivo em http://tryhandlebarsjs.com/ para saber tudo o que o ele pode fazer por você.
Uso
Em geral, a sintaxe dos modelos Handlebars.js é um superset do Mustache. Depois de ter um modelo, use o método Handlebars.compile para compilar o modelo em uma função JavaScript. Esta função gerada leva um argumento de contexto que será usado para renderizar o modelo.
Segue abaixo um exemplo simples, para executa-lo
<html>
<head></head>
<body>
<script src="handlebars.js"></script>
<script>
let exemplo = "<p>Olá, meu nome é {{nome}}. Eu sou de {{cidadeNatal}}. Eu tenho "
+ "{{filhos.length}} filhos:</p>"
+ "<ul> {{#filhos}}<li>{{nome}} tem {{idade}} anos</li>{{/filhos}}</ul>";
let template = Handlebars.compile(exemplo);
let dados = {
"nome": "Paulo",
"cidadeNatal": "Cidade, RS",
"filhos": [{
"nome": "João", "idade": "12"
}, {
"nome": "Maria", "idade": "4"
}]
};
let resultado = template(dados); document.writeln(resultado);
</script>
</body>
</html>
Templates pré-compilados
O handlebars permite que os templates sejam pré-compilados e incluídos como código JavaScript ao invés de templates handlebars, permitindo que as aplicações carreguem mais rápido. Para mais detalhes veja esse LINK
Principais diferenças entre o Handlebars.js e o Mustache
O Handlebars.js incrementa algumas funcionalidades adicionais para fazer o desenvolvimento de templates mais fácil e também muda alguns detalhes de como o “partials” funciona. Segue abaixo alguns itens que mudam entre os dois.
- Caminhos aninhados
- Helpers
- Expressões de bloco
- Valores literais
- Comentários delimitados
As expressões de bloco têm a mesma sintaxe que as sessões do Mustache, mas não devem ser confundidas umas com as outras. Sessões são similares com o “each” implícito ou com “statement” dependendo dos dados inseridos e os “helpers” são pedaços de código explícitos que podem implementar qualquer comportamento que quiserem. A documentação do Mustache define o comportamento exato das sessões. No caso de haverem conflitos com os nomes, os “helpers” recebem prioridade.
Performance
Em um teste de performance bruta, o templates pré-compilados do Handlebars.js (na versão original do Handlebars.js) renderiza na metade do tempo dos templates do Mustache. Seria uma pena se fosse de qualquer outra forma, pois eles foram pré-compilados, mas a diferença na arquitetura tem diversas vantagens de performance. A nova versão do Handlebars é mais rápida que a original a ponto de que diversos testes de performance independentes registraram uma diferença de 5 a 7 vezes mais rápido que o equivalente em Mustache.
Nota
Este é um resumo traduzido diretamente do site do handlebars. Para mais detalhes, acesse o site http://handlebarsjs.com/ e tambémhttps://github.com/wycats/handlebars.js
