Criando templates com Handlebars

Ítalo Queiroz,•JavascriptHandlebarsTemplatejQuery
Voltar

Se você querido “manolo” leitor que quando utiliza javascript se “amarra” em misturar lógica com string’s que geram seu html.

Html misturado com a lógica

var html = 
    '<div>' +
        '<ul>' +
            '<li>1</li>' +
            '<li>2</li>' +
            '<li>3</li>' +
            '<li>4</li>' +
        '</ul>' +
    '</div>';
      
//Bizarro :D eu sei        
if (1 == 1) {
  html += '<span> Coisa linda </span>';
}
 
$('#target').html(html);

Venho, então, lhe propor uma solução que poderá mudar a sua vida de uma vez por todas. (sei que isso foi bem tosco)

Desde que comecei a postar tenho falado sobre templates javascript e dentre eles sobre o Handlebars, então pensei em montar este tutorial com o foco apenas em conhecermos o template e como é simples sua implementação.

Começaremos criando uma estrutura de pasta conforme a imagem abaixo.

    • div.hb
    • table.hb
    • index.html

    • Na nossa index.html criaremos um documento html padrão, adicionando algumas bibliotecas javascript (jQuery e Handlebars) e com 2 div’s, uma com id table e outra com id div.

    index.html
    <!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div>
      <h3>Template 1 - Table</h3>
      <div id="table"></div>
  </div>
  <div>
      <h3>Template 2 - Div</h3>
      <div id="div"></div>
  </div>
  <!-- Handlebars Library-->
  <script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
  <!-- jQuery Library-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</body>
</html>

    E montaremos nossos 2 arquivos de template (table.hb e div.hb) com os seguintes códigos.

    table.hb
    <style type="text/css">
    #tableComponent td{border:1px #000 solid;padding:10px}
</style>
<table id='tableComponent'>
  {{#each pessoas}}
      <tr>
          <td>{{nome}}</td>
          <td>{{idade}}</td>
      </tr>
  {{/each}}
</table>
    div.hb
    <style type="text/css">
  .divComponent div{
      width:100px;
      height:50px;
      padding:10px;
      margin:10px;
      color:#FFF;
      background:#A5BFDD;
      float:left;
}  
</style>
<div class="divComponent">
  {{#each pessoas}}
    <div>
      Nome: {{nome}}<br />
      Idade: {{idade}}
    </div>
  {{/each}}
</div>

    Como você deve ter notado, existem elementos que estão entre chaves duplas - {{ nome }} – que são usadas sempre que quisermos imprimir o valor de um elemento. Caso estas chaves duplas venham referenciando um bloco de expressão - {{ #each pessoas }} - é carregado este helper que pode ser um loop, uma formatação de impressão, condicionais - {{ #if pessoas }} - e zas.

    Logo abaixo temos o código javascript que faz toda a mágica de chamar nossos templates. Tentarei explicar da melhor forma possível :D. Lembrando que o javascript poderia ter sido bem melhor elaborado, com funções para gerenciar nossos templates, mas achei melhor deixar isso para outro post e não complicar mais as coisas!!!

    JS que chama nossos templates

    $(function() {   
    /******************************************
    * Carregando o template "table"
    ******************************************/
    //Variável reponsável por guardar o template de "table"
    var tableTemplate = null;
    //Carrega o template de "table";
    $.ajax({
      url: 'table.hb',
      dataType: 'html',
      async: false,
      success: function (template) {
          if (template) {
              tableTemplate = Handlebars.compile(template);
          }
      }
    });
    //Dados que seram passados para o template.
    var context = {"pessoas":[{"nome":"Pedro","idade":23},{"nome":"Kleber","idade":20},{"nome":"Marcos","idade":31}]};
    //Gera o html de acordo com o JSON passado.
    var tableHtml = tableTemplate(context);
    //Seta o html para a div#table, outra opção seria $('#table').html(tableTemplate(context));
    $('#table').html(tableHtml);
    
    /******************************************
    * Carregando o template "div"
    ******************************************/
    //Variável reponsável por guardar o template de "div"
    var divTemplate = null;
    //Carrega o template de "table";
    $.ajax({
      url: 'div.hb',
      dataType: 'html',
      async: false,
      success: function (template) {
          if (template) {
              divTemplate = Handlebars.compile(template);
          }
      }
    });
    //Gera o html de acordo com o JSON passado (usaremos o mesmo que do template "table").
    var divHtml = divTemplate(context);
    //Seta o html para a div#div, outra opção seria $('#div').html(divTemplate(context));
    $('#div').html(divHtml);
});

    Resumidamente o que precisei fazer foi carregar meus arquivos.hb que poderiam ser qualquer outro tipo de extensão (Ex: table.html, table.italo, table.queiroz), o importante mesmo é o seu conteúdo.

    Para carregar e obter o html dos meus templates utilizei a função $.ajax() (Linha 9 e linha 32). Após ter a string dos meus arquivos, compilo o mesmo para ser um template Handlebars (Linha 15 e linha 38).

    Depois de feito isso é necessário passar um JSON (Linha 20) para o nosso template gerar o html (Linha 22 e linha 43) e logo depois adiciono o html gerado em nossas div’s para serem apresentadas no browser.

    Conclusão

    O uso de templates JS ajudam muito na criação e na manutenção de conteúdos dinâmicos, além de prover uma organização, separando as montagens de html da lógica do sistema. Caso seja necessário um designer poderá mexer apenas no arquivo do template para alterar a aparência sem necessariamente ter que editar um arquivo js.

    Tentei explicar de forma bem simples o funcionamento do Handlebars, aconselho que você leia a documentação (opens in a new tab) para saber o que mais esta engine de template js pode fazer….

    Segue o link (opens in a new tab) no GitHub para download.

    RSS