Layouts Javascript com Handlebars

Explicações de Handlebars, um sistema de layouts Javascript que poupará a você muito tempo ao gerar código HTML a partir de objetos JSON.

Por Eduard Tomás - Tradução CRV


Publicado em: 17/6/13
Valorize este artigo:
 
Neste artigo vamos por mãos à obra com HandlebarsJS e poupar a você muitas linhas de código Javascript ou jQuery, que pode chegar a ser bastante complexo e de difícil manutenção. Se você se dedica à programação front-end, você deve investir um tempo conosco lendo estas linhas.

HandlebarsJS é um sistema de layouts Javascript e uma ferramenta essencial. Está baseado na sintaxe de "Mustache Templates", às que foram agregadas algumas funcionalidades extras.

O primeiro passo para entender o que é Handlebars e por que nos resultará de utilidade é entender o que são os sistemas de layouts de Javascript.
 

Como funciona Handlebars

Estas ferramentas nos podem ajudar de maneira especial quando consumimos dados que proveem de algum sistema em formato JSON. Você terá um HTML do layout, simples, apenas com as etiquetas da estrutura que você quer gerar e por meio de Handlebars você chama o layout, enviando os dados JSON e obterá diretamente o HTML com os dados já carregados.

Ademais, nos layouts você poderá ter estruturas simples como blocos condicionais, iteradores que percorram coleções, etc. Veremos que todo isso é simples porque Handlebars é uma biblioteca com funções limitadas, úteis, porém bastante restringidas no propósito único de gerar HTML a partir de objetos JSON.

A operativa normal com Handlebars é a seguinte:

  • Carregar um layout, que não é mais que um código HTML misturado com alguns elementos simples de controle.
  • Compilar o layout , que nos permite convertê-lo em uma função JS
  • Executar o layout para obter a cadeia HTML a partir do JSON
  • Inserir no DOM o código HTML resultante de executar otemplate, usando jQuery ou nossa biblioteca preferida.
Carregar um layout em Handlebars:
A forma habitual de armazenar um template será em um bloco de script no que meteremos um type que não corresponda com nenhum outro conhecido. Recomendam usar type="text/x-handlebars-template", mas na realidade podemos colocar o que queiramos. O que conseguimos assim é que esse script se inclua no DOM, mas os navegadores não tentarão parseá-lo, nem executá-lo nem qualquer coisa do tipo.

Nota: Deve-se pensar que, quando tentamos executar um template Handlebars com Javascript se encontrará um erro, já que o template está escrito em código HTML. Por isso se coloca um type na etiqueta Script que o navegador não conheça, de modo que nos asseguremos de que não vai tentar executá-lo.

A outra opção é usar uma chamada a AJAX para trazer os templates, com a única limitação de que se deve sincronizar o retorno da chamada com a compilação e execução dos templates. Em outras palavras, devemos esperar que a chamada a AJAX para trazer o template se tenha produzido com sucesso para poder compilar os layouts que vamos usar em nossa página.

Compilar um template:
Em Handlebars temos que tomar um passo prévio antes de poder executar um template, que é compilá-lo. É algo muito simples. Chamamos Handlebars.compile() enviando como parâmetro o texto de nosso layout. O resultado disto é uma função, que é a que teremos que invocar para executá-la.

var tmpl = Handlebars.compile(stemplate);

A variável "stemplate" é a cadeia com o conteúdo do template. Finalmente, uma vez compilada, na variável que recebemos como retorno, que chamamos tmpl, se terá a função do layout.

Executar um template Handlebars:
Uma vez que tenhamos a função do template, que é o que obtemos como retorno depois de sua compilação, podemos invocá-la passando um único argumento, que é o objeto JSON que queremos usar para carregar os dados no template.

Obtemos como resposta da função do template um código HTML pronto para ser inserido no DOM.

var html = tmpl(ctx);

Esse HTML é o que poderemos usar mais tarde para inserir na página.

Nota: Compilamos os templates uma única vez e os executamos tantas vezes quanto queiramos. O processo custoso em tempo de execução é compilar os templates. Uma vez feito, executar o template para produzir o HTML é um processo rápido que podemos realizar as vezes que necessitemos sem ter que sofrer pelo rendimento da aplicação.

 

Primeiro exemplo de uso de Handlebars

Podemos ver agora um primeiro exemplo de uso de HandlebarsJS, no qual se cria um layout simples , com este aspecto:

<script type="text/x-handlebars-template" id="template">
{{# each Beers}}
Name: {{Name}} <br />
{{/each}}
</script>

Depois explicaremos as estruturas de controle para os layouts, mas você poderá ver aqui uma iteração na que se percorre uma estrutura chamada "Beers" e se vai mostrando seu dado "Name".

Assim trazemos o código do layout:

var stemplate = $("#template").html();

Nota: aquí você vê o método html() de jQuery, mas não quer dizer que Handlebars use jQuery de maneira única, podemos usá-lo com qualquer biblioteca que desejemos . Ao longo deste exemplo se usa jQuery diversas vezes.

Depois compilamos o layout:

var tmpl = Handlebars.compile(stemplate);

Agora poderíamos trazer nosso JSON por meio de AJAX. De novo, usaremos a biblioteca que desejemos. Com a cadeia JSON recebida simplesmente lhe aplicamos um contexto:

var ctx = {};
ctx.Beers = data; //data e o JSON que recebi

E por fim executamos nosso layout, enviando esse JSON.

html = tmpl(ctx);

Acabamos acrescentando o conteúdo por meio de qualquer biblioteca Javascript. Em jQuery usaríamos algumas linhas de código como estas:

$("#content").append(html);
$("#content").show();

 

El JSON que recibo

Seu JSON pode vir de qualquer lugar, de seu backend, de uma Rest-API que você mesmo tenha feito ou de qualquer "Web Service" que te entregue dados em JSON.

Ao longo dos próximos exemplos nosso JSON será sempre mesmo:

[{"Name":"Estrella","Brewery":"Damm","Style":"Euro Lager","Abv":"5.4","Ibu":"25","Favorite":false,"LastCheckin":{"When":"24/04/2013 - 20:00:01","Drinker":"@eiximenis"}},
{"Name":"Voll Damm","Brewery":"Damm","Style":"Bock","Abv":"7.2","Ibu":"40","Favorite":false,"LastCheckin":{"When":"24/04/2013 - 21:00:01","Drinker":"@CKGrafico"}},
{"Name":"Devil's","Brewery":"Marina","Style":"Indian Pale Ale","Abv":"9.0","Ibu":"150","Favorite":true,"LastCheckin":{"When":"24/04/2013 - 22:00:01","Drinker":"@midesweb"}},
{"Name":"Guinness Draught","Brewery":"Guinness","Style":"Irish Stout","Abv":"4.5","Ibu":"40","Favorite":true,"LastCheckin":{"When":"24/04/2013 - 23:00:01","Drinker":"@eiximenis"}}]

Você pode ver o código completo deste primeiro exemplo a seguir:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beer List</title>
<link href="Site.css" rel="stylesheet" />
<script src="handlebars.js"></script>
<script src="jquery-2.0.0.min.js"></script>

<script type="text/x-handlebars-template" id="template">
{{# each Beers}}
Name: {{Name}} <br />
{{/each}}
</script>
</head>
<body>
<div id="content" style="display:none;">
<strong>Our Beers...</strong><br/>

</div>
<script type="text/javascript">
$(function() {
var stemplate = $("#template").html();
var tmpl = Handlebars.compile(stemplate);
var xhr = $.ajax({
url: '/api/Beers'
});

xhr.done(function (data) {
var ctx = {};
ctx.Beers = data;
var html = tmpl(ctx);
$("#content").append(html);
$("#content").show();
});
});


</script>

</body>
</html>

No artigo seguinte exploraremos como são os layouts de Handlebars, sua sintaxe, possibilidades, etc.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato