Essa seja uma série de posts, onde mostro onde apliquei o que aprendi. Espero que goste.

Handlebars

Reescrevendo uma aplicação, cheguei a um dilema, html no js. Bom, quem nunca fez isso, que atire a primeira pedra.


    var template   = '<div class="produto produto-'+ id +'">';
        template  += '<h1>'+ titulo +'</h1>';
        template  += '<img src="'+ img +'" alt="'+ titulo +'">';
        template  += '<p>'+ descricao +'</p>';
        template  += '<a href="'+ url +'">Ver Produto</a>';
        template  += '</div>';

Isso em uma condição boa, imagina casos mais complexo, onde incluem variação dependendo do retorno. Fica impossível ser entendido de forma rápida, certamente terá uma perda de tempo para entender. É nesse momento que entra o Handlebars um script de template bem simples e semântico. Para começar a usar é bem simples.

Criando o template

Vamos criar um template usando o exemplo acima.

    
    <script id="produtoTemplate" type="text/x-handlebars-template">
        <div class="produto produto-{{id}}">
            <h1>{{titulo}}</h1>
            <img src="{{img}}" alt="{{titulo}}">
            <p>{{descricao}}</p>
            <a href="{{url}}"> Ver Produto </a>
        </div>
    </script>
    

Dessa forma fica legível e de fácil entendimento, para manutenção é uma beleza. :)

Usando template

Primeiro será necessário acessar o template e compilar para o Handlebars:

    // Bem simples, acessa o template no html e compila através do método compile do Handlebars
    var source = $('produtoTemplate').html(),
        template  = Handlebars.compile( source );

Agora é so usar:


    // Objeto do Produto
    var produtoInfo = {
        id : 1,
        titulo : 'Produto Handlebars',
        img : 'https://unsplash.it/150/?random',
        descricao : 'Meu primeiro template com Handlebars',
        url : '#'
    },
    // Adicionando as informações do produto ao template
    produto = template( produtoInfo );

    // Adicionando o template com as informações no HTML
    $('.produtos-listagem').append( produto )

Mais

É possível adicionar condições no template, assim podendo modifica-lo quando necessário.


    <script id="produtoTemplate" type="text/x-handlebars-template">
        
        <div class="produto produto-{{id}}">
        <!-- Caso promoção retorno true, a div com texto promocional é adicionada -->
            {{#if promocao}}
                <div class="promocao">20% Off</div>
            {{/if}}
            <h1>{{titulo}}</h1>
            <img src="{{img}}" alt="{{titulo}}">
            <p>{{descricao}}</p>
            <a href="{{url}}"> Ver Produto </a>
        </div>
        
    </script>

Finalizando

Abaixo tem um exemplo funcional. Espero que tenha gostado do post.

See the Pen O que eu aprendi: Handlebars.js by Bomfim Jr (@bfmjr) on CodePen.

Qualquer dúvida ou sugestçao é só comentar xD