Helpers no Handlebars - Node.js

Helpers são funções que retornam uma string. Esta string pode ser adicionada a qualquer lugar de templates e pode representar até mesmo código HTML.

Helpers otimizam a criação de código para templates. Podemos definir uma função helper uma vez e usá-la em vários lugares para gerar código.

Para usar helpers, vamos alterar o código do arquivo app.js:

const express = require("express");
const hbs = require("hbs");

const app = express();

hbs.registerHelper("getTime", function() {
    const myDate = new Date();
    const hour = myDate.getHours();
    let minute = myDate.getMinutes();
    let second = myDate.getSeconds();
    if (minute < 10) {
        minute = "0" + minute;
    }
    if (second < 10) {
        second = "0" + second;
    }
    return `Hora atual: ${hour}:${minute}:${second}`;
});

app.set("view engine", "hbs");

app.get("/", function(_, response) {
    response.render("home.hbs");
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Um helper é definido usando a função hbs.registerHelper(). O primeiro parâmetro é o nome do helper e o segundo é a função que retorna a string. Neste caso, retorna a hora atual.

Vamos agora definir o código do arquivo home.hbs:

<!DOCTYPE html>
<html>
<head>
    <title>Página Principal</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Página Principal</h1>
    <div>{{getTime}}</div>
</body>
</html>

Estrutura do projeto:

my-express-app/
│
├── app.js
├── package.json
│
├── views/
│   └── home.hbs
│
└── node_modules/

Para chamar o helper, usamos o nome do helper dentro de chaves duplas:

Um helper pode retornar não apenas uma string, mas também código HTML. Além disso, podemos passar parâmetros ao helper que serão usados no resultado. app.js:

const express = require("express");
const hbs = require("hbs");

const app = express();

hbs.registerHelper("getTime", function() {
    const myDate = new Date();
    const hour = myDate.getHours();
    let minute = myDate.getMinutes();
    let second = myDate.getSeconds();
    if (minute < 10) {
        minute = "0" + minute;
    }
    if (second < 10) {
        second = "0" + second;
    }
    return `Hora atual: ${hour}:${minute}:${second}`;
});

hbs.registerHelper("createStringList", function(array) {
    let result = "";
    for (let i = 0; i < array.length; i++) {
        result += `<li>${array[i]}</li>`;
    }
    return new hbs.SafeString(`<ul>${result}</ul>`);
});

app.set("view engine", "hbs");

app.get("/", function(_, response) {
    response.render("home.hbs", {
        fruit: ["maçã", "limão", "banana", "uva"]
    });
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Aqui adicionamos o helper createStringList(), que aceita um array de strings como parâmetro e cria um elemento <ul> a partir delas. Para que o valor retornado seja tratado como HTML, usamos a função hbs.SafeString().

Também vamos alterar o arquivo de visualização home.hbs:

<!DOCTYPE html>
<html>
<head>
    <title>Página Principal</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Página Principal</h1>
    <div>{{getTime}}</div>
    <div>{{createStringList fruit}}</div>
</body>
</html>

O resultado na página web será uma lista de frutas: