Por Fabrício Tavares / 2013-02-20

Handlebars Helpers com Ember.js

Handlebars é um ótimo template engine JavaScript construído sobre o Mustache. Se ainda não conhece, dá uma olhada no site, dá pra ter uma noção bem bacana do que ele é capaz.

Criando um Helper

Para criar um novo handlebar helper para, por exemplo, um botão de submit form, usa-se o seguinte:

Handlebars.registerHelper('submitButton', function(text) {
    return new Handlebars.SafeString(
        '<button type="submit">' + text + '</button>'
    );
});

Entretanto, às vezes é interessante usar um helper para algum tipo de formatação, como, por exemplo, centavos para real:

Handlebars.registerHelper('real', function(centavos) {
    var real = Math.floor(centavos / 100);

    return real;
});

Template:

<div>
    R$ {{real totalCost}}
</div>

Saída HTML:

<div>
    R$ 150,43
</div>

Se o valor da variável totalCost for alterado, o helper só imprimirá o novo valor se a página for recarregada. O que não é bem o que queremos quando estamos usando o Ember.js.

Criando um Bound Helper

Em situações onde queremos que o helper seja chamado toda vez que o valor da variável for modificado, utilizamos o Ember.Handlebars.registerBoundHelper.

Ember.Handlebars.registerBoundHelper('real', function(centavos) {
    var real = Math.floor(centavos / 100);

    return real;
});

Dessa forma, sempre que o valor da variável alterar, o helper será chamado.