Dica para renderização de HTML mais prática com Handlebars

Sobre o Handlebars

 
Handlebars é um template engine para Javascript, que permite que você defina snippets de HTML semânticos, sinalizando através de chaves (daí o nome “Handlebars”) a inserção de variáveis, blocos de repetição e renderizações condicionais de pedaços de mark-up. Estes templates são transformados em HTML pelo Handlebars, especificando-se um objeto contendo os dados (contexto), e um HTML renderizado é então retornado como string.
Isto permite separar o seu HTML da lógica no javascript, evitando assim o noise do código que seria necessário para criar estruturas complexas de elementos do DOM programaticamente.
Um exemplo de um código que gera uma determinada estrutura HTML (com jQuery):

var title = "Title",
    body = "Body";
$('<div>').addClass('entry').append(h1).append(
    $('<h1>').text(title)
).append(
    $('<div>').addClass('body').text(body)
);

Compare isto com um template do Handlebars para gerar a mesma estrutura:

<div>
    <h1 class="entry">{{title}}</h1>
    <div class="body">
        {{body}}
    </div>
</div>

Muito mais limpo, não? As entradas entre {{ }} indicam as propriedades a serem extraídas do objeto passado como contexto na hora da renderização para serem inseridas no HTML resultante.

Renderizando um template

Porém, para renderizar este template, é necessário um processo um tanto burocrático. O template acima deve ser colocado dentro de uma tag <script type="text/handlebars">, com um ID, e seu conteúdo deve ser acessado no código como abaixo:

var source = $('#template_id').html();
var template = Handlebars.compile(source);
var context = {
    title: "Title",
    body: "Body"
};
var html = template(context);

Renderizando de maneira mais prática

No entanto, você pode agilizar o processo de renderização extendendo o jQuery com uma função que faça todo o trabalho. Adicione o template normalmente na tag script com ID, e simplesmente inclua isto no seu onload:

$.fn.render = function(context) {
    var tpl = Handlebars.compile($(this).html());
    return $(tpl(context));
};

Agora, você pode renderizar seus templates de maneira mais simples, usando apenas:

var element = $('#template_id').render(context);

E  o resultado retornado já é agora um objeto jQuery.
Rodolfo Ferreira