I can't understand {{{ body }}} in Handlebars

76 views Asked by At

It's translated, I'm not fluent in English yet, maybe it's not exact in some parts, well my question is, why the {{{ body }}} in an hbs file (example: 'main.hbs') and how? I know what is going to include me in this file ('main.hbs')?

I leave you the 'main.hbs' example...

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titulo</title>
</head>
<body>
  {{{ body }}} <!-- AquĆ­ -->
</body>
</html>

Desde ya muchas gracias a quien responda a esta duda...

1

There are 1 answers

0
moonwave99 On

The {{{ body }}} block is replaced by handlebars by the contents of the rendered template, for instance this route wants to render the index.hbs template:

app.get("/", (request, response) => {
  response.render("index", { title: "Homepage" });
});

You can see a working example here. And the template itself is:

<main>
    <h1>{{ title }}</h1>
    <p>This is the homepage</p>
</main>

The whole HTML output will look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
</head>
<body>
  <main>
    <h1>Homepage</h1>
    <p>This is the homepage</p>
  </main>
</body>
</html>

Three pair of curlies ({{{ ... }}}) instead of two are needed to prevent HTML escaping.