Usando Templates Parciais no Handlebars no Express com Node.js

No capítulo anterior, aprendemos a usar o Handlebars para criar templates.

No entanto, se você estiver criando um site com várias páginas, pode ser necessário reutilizar alguns elementos comuns, como cabeçalho, rodapé, menu e outros. Para isso, o Handlebars oferece a capacidade de criar templates parciais.

É comum que páginas da web em uma aplicação utilizem alguns elementos comuns. No entanto, surge o problema de que, se for necessário alterar algum desses elementos, será preciso modificar todas as páginas que os utilizam. Seria muito mais fácil definir esses elementos em um único lugar e depois incluí-los em todas as páginas.

Os partial views (templates parciais) ajudam a resolver esse problema. Eles representam elementos comuns que podem ser adicionados às templates regulares.

Por exemplo, podemos criar um menu e um rodapé comuns. Para isso, criaremos um subdiretório views/partials em nosso projeto para armazenar os templates parciais.

Adicione um novo arquivo chamado menu.hbs na pasta views/partials:

<nav><a href="/">Início</a> | <a href="/contact">Contatos</a></nav>

Em seguida, adicione um arquivo footer.hbs na mesma pasta:

<footer><p>MyCorp - Copyright © 2017</p></footer>

Esses são dois parciais que serão incluídos para os templates regulares.

No diretório views, defina uma template regular contact.hbs:

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <meta charset="utf-8" />
  </head>
  <body>
    {{> menu}}

    <h1>{{title}}</h1>
    <p>Email: {{email}}</p>
    <p>Telefone: {{phone}}</p>

    {{> footer}}
  </body>
</html>

Para incluir um parcial, utilizamos a expressão {{> menu}}, onde especificamos o nome do arquivo da partial view sem a extensão.

Agora, adicione um novo template chamado home.hbs na pasta views:

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

    {{> footer}}
  </body>
</html>

Assim, temos dois templates que compartilham elementos comuns. Se for necessário adicionar um novo item ao menu, basta alterar o arquivo menu.hbs.

No final, nosso projeto ficará assim:

app.js
node_modules
views
    ├── contact.hbs
    ├── home.hbs
    └── partials
        ├── footer.hbs
        └── menu.hbs

Finalmente, modifique o arquivo app.js:

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

app.set("view engine", "hbs");
hbs.registerPartials(__dirname + "/views/partials");

app.use("/contact", function (request, response) {
  response.render("contact", {
    title: "Meus Contatos",
    email: "gg@mycorp.com",
    phone: "+1234567890",
  });
});

app.use("/", function (request, response) {
  response.render("home.hbs");
});

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

Para configurar o uso de partial views, utilizamos a chamada:

hbs.registerPartials(__dirname + "/views/partials");

Isso define o diretório onde as partial views estão localizadas.

Ao executar o projeto e acessar uma das duas rotas (/ ou /contact), a página web renderizada conterá o menu e o rodapé.

Partial views no Express em Node.js