hbs continuando con su herencia de Moustache, trabaja con logic-less, esto es evitar la lógica de la aplicación en el modo de vista para un mejor mantenimiento. Parte de eso se trata el uso de los templates parciales
Un ejemplo típico de cualquier web es que se repitan la cabecera y el pie. Esto invita a imaginarnos que en nuestra carpeta de views podemos tener los archivos header.hbs y footer.hbs. Suena lógico y de eso se trata.
layout.hbs: una página maestra
En la lógica de las master page de ASP.Net; hbs utiliza el archivo layout.hbs, en donde ubicaremos las etiquetas básicas de doctype html header y body. Creamos el archivo en cuestión dentro de la carpeta /views
<!doctype html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{> header}}
{{{body}}}
{{> footer}}
</body>
</html>
Como vemos, dentro de los tags del body se está metiendo los archivos header y footer a través de la inclusion {{> header}}, {{> footer}} y una variable body, que será el contenido que pondremos en la index.hbs.
index.hbs, la página principal
En la carpeta views creamos el archivo index.hbs. Dentro de este pondremos el contenido, (y solo el contenido):
<section>
<h2>Index</h2>
<p>Esto es un parrafo en la página principal</p>
</section>
lo siguiente será crear los archivos a ser incluidos: header y footer
Inluciones: header y footer
Ahora, ambos archivos los crearemos en una subcapeta de views llamada “partials”.
header.hbs
<header>
<h1>{{title}}</h1>
</header>
footer.hbs
<footer>
Este es el pie de página.
</footer>
Notese como en el header hemos puesto la variable “title” que vamos a pasarla cuando creemos nuestra app. Me parece interesante mostrar esto para que se note la no incidencia de la partición del template en este asunto.
app.js: Finalmente la aplicación
En la app.js vamos a crear la aplicación en si. En esta oportunidad se será necesario traer el módulo de Express para usar el método “registerPartials” que se encargará de registrar los archivos de header y footer, bastará para esto pasar como parametro la carpeta partials.
var express = require('express');
var hbs = require('hbs');
var app = express();
hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
app.get('/', function(req, res) {
res.locals = {
title: 'testeando hbs'
}
res.render('index');
});
app.listen(3000);
Ahora ya con esto, tendremos un html mostrando todo el contenido que mostramos. Para ver esto finalmente, ejecutamos node en consola:
node app.js
Vamos a localhost:3000 y allí veremos el resultado. Recuerdese que el uso de parciales es útil para mostrar contenidos repetidos en otras partes de nuestro sitio.
En el próximo post veremos la posibilidad de extender un area de nuestro html con cierto contenido costumizado para aplicar directamente en una página específica de nuestro sitio.
Comments are closed.