Como vimos en el post anterior, la instalación basica de Express utiliza Jade como motor de templates. Antes de ponerme a ver Jade y sus posibilidades me interesó el Hbs. Este motor de templates basado en HandleBars el cual está basado en Moustache. La diferencia radica que hbs se adapta a express de manera sencilla
Se puede ver en la documentación oficial de Express que no hay soporte para hbs. Allí mismo se habla como alternativa a Jade el ejs, un motor de template que puede instalar con la estructura misma que se genera con express:
$ express – –ejs myapp
Desgraciadamente no es posible hacerlo con Hbs, Entonces este se instala como un Módulo externo:
$ sudo npm install hbs -g
Un ejemplo
Vamos a ver un ejemplo sencillo que muestra el uso de hbs. Al lado del archivo .js (que puede ser el visto en el anterior post) creamos una carpeta “views”. Dentro de ella creamos un archivo index.hbs. Su contenido será sencillo:
<html>
<head>
<title>hbs test</title>
</head>
<body>
<h1>Titulo</h1>
<p>mi nombre es: {{name}}</p>
</body>
</html>
Luego en el app.js usaremos el siguiente código
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.get('/', function(req, res){
var data = {
name: "Hbs",
}
res.render('index.hbs', data);
});
app.listen(3000);
Vamos a localhost:3000 y ahi encontraremos el html que esperamos con el saludo “mi nombre es Hbs”. Notese que aun no traimos el módulo hbs. No fue necesario. En el response (“res”) usamos el método render que le pasa por parámetro el archivo .hbs, y luego la data. esa data no es mas que la variable “name” con el valor hbs.
La otra cosa que hemos agregado más arriba es el app.set(‘views’… donde pasamos la ruta de la carpeta views y en la siguiente línea le decimos a la app que el view engine es hbs.
Con esto ya tenemos una idea de como funciona express y los motores de plantillas
En el próximo post veremos el uso de estilos (css) con Node.js.
Comments are closed.