Helpers no Handlebars no Express com 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:

Helpers em Express e Node.js

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:

Criando helpers em Express e Node.js