Handlebars

NODE.
JS y MONGODB
CLASE 3 : HANDLEBARS

HANDLEBARS
Esta librería nos ayuda como motor de “vistas”. Las vistas vendrían a ser los
archivos estáticos que le servimos al cliente. Como tal, queremos hacerlos lo más
dinámico posibles, de lo contrario nuestra aplicación será demasiado estática y
carece de contenido cambiante.
Instalación
Nosotros vamos a usar una versión de la librería que ya viene “más” integrada con
Express:
npm install --save express-handlebars
Uso
Ahora que tenemos instalado handlebars tenemos que “decirle” , es decir

configurar, a la aplicación a que entienda que queremos usar ese motor de vistas.
Para eso usamos :
app.engine("handlebars",engine.engine)
app.set("view engine","handlebars")
Con la primer línea estamos registrando un nuevo motor de vistas y la extensión

de los archivos que por defecto es “archivo.handlebars”(El mismo se puede
cambiar desde la propiedad de configuración extname al crear la instancia o solo
configurar el actual motor). En la segunda línea estamos diciéndole a app que use
ese motor que acabamos de registrar.
Instancia

Podemos trabajar handlebars solo configurandolo pero también podemos optar
por crear una instancia fija para todos nuestros layouts. Para eso usamos el
método create:
const ehbs = require("express-handlebars");

const hbs = ehbs.create({
defaultLayout : "main"
//Cualquier otra propiedad de configuración del template
})
Entonces todos los templates siempre usaran ese otro template “main” como
default layout. Los template por default se encuentran ubicados en “root/views” y
los layouts están en una subcarpeta de esta llamada con el mismo nombre
“root/views/layouts”.
Estos directorios se pueden cambiar también usando las propiedades de

configuración de l ayoutsDir="views/layouts/" ó
partialsDir="views/partials/".
Estos layouts son archivos que contienen HTML parcial pero más general que un
template común. Por ejemplo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content=" ie=edge">
<title>Document</title>
</head>
<body>
{{{body}}}
</body>
</html>

Nótese el uso de la nomenclatura {{{body}}} la cual usaremos para cargar
templates parciales más específicos dentro de este layout.

Por último hacemos uso del método render de los Response de un request en
Node.js :
...
res.render("home")
...

El mismo cargará primero el template de “main.handlebars” y en su interior
cargará su propio contenido dentro de la etiqueta {{{body}}}. En nuestro template
parcial podemos tener cualquier contenido parcial como por ejemplo :
<h1>Hola Mundo!</h1>

Entonces habremos hecho render de una etiqueta h1 dentro del layout
anteriormente mencionado.

No solo podemos usar nuestro método render para decirle que templates
mostrar, sino que también podemos usarlo para pasarle un objeto con variables,
las cuales estarán disponibles en cada template parcial y layout usando esta
misma nomenclatura!. Entonces podríamos :

//home.handlebars
<h1>Hola {{{usuario}}}</h1>
//app.js
res.render('home',{
usuario : "EducacionIT"
})
Y debería leerse la frase “Hola EducacionIT” dentro de una etiqueta h1. Hemos
conseguido hacer nuestra primera instancia de servidor de archivos dinámicos
por HTTP!

CONFIGURANDO HANDLEBARS
Avanzando en implementación de motores de plantillas para el front-end vamos
a configurar un par de aspectos de nuestro framework Handlebars.
.extname
Ya habíamos visto nombrado el nombre del parámetro de configuración para
cambiar el nombre de la extensión de los archivos, pero nunca mencionamos su
implementación:
/**
* Instalación, registración y habilitación de la nueva
extensión
*/
hbs.extname = ".hbs"
app.engine('.hbs',hbs.engine)
app.set('view engine','.hbs')
Con estas líneas de código estamos :

1. Habilitando una nueva extensión para nuestros archivos de plantillas
2. Registrando un nuevo motor de plantillas en la aplicación
3. Habilitando el uso del nuevo motor registrado anteriormente

A partir de ahora todos nuestros archivos van a pasar a ser de
“archivo.handlebars” a “archivo.hbs” , mucho más conveniente para rápida
creación de archivos.
.static
El método .static() nos permite configurar el directorio desde donde se van a

servir nuestros archivos estáticos como .css y .js.
express.static(root, [options])

Podemos hacer uso del módulo nativo de Node.js path para construir una URL
absoluta correcta :
express.static(path.join(__dirname,"public"))

.use
El método .use() nos sirve para registrar funciones middlewares que van a actuar
a modo de proxy antes de enviar una respuesta al cliente:
app.use([path,] callback [, callback...])
El parámetro path nos permite registrar un middleware con una URL

determinada, de lo contrario por defecto es “/”. Podemos incluso combinar este
método con el anterior para desviar los pedidos de nuestros archivos estáticos a
un directorio predeterminado :
app.use("/resources",express.static(path.join(__dirname,"public")))
Esto haría que en nuestro front-end tengamos que pedir los archivos a
“/resources/estilos.css” y los mismos estarían siendo realmente contenidos en la
ruta “root/public/estilos.css”.

HELPERS Y BUILT-IN HELPERS
Los helpers son funciones que podemos ejecutar en el front-end usando los
atajos {{ fn }} de la misma forma que podíamos exponer el valor de una variable
cualquiera en una plantilla. Si tuviéramos que pasarle parámetros se lo podemos
hacer de manera in-line. Podemos configurar nuestros helpers para que estén
disponibles de manera global en el momento en que generamos una instancia
de Handlebars :
const hbs = exphbs.create({

defaultLayout:"main",
helpers : {
saludar : function(){
return "
Hola!"
}
}
})

Este helper “saludar” va a estar disponible en cualquier plantilla que usemos a
través del atajo
{{ saludar }}

Podemos configurar nuevos helpers por cada plantilla servida en cada función
render :

app.get('/',(req,res)=>{
res.render('landing',{
helpers : {
saludo : function(){
return "Home!"
}
}
})
})
Built-In Helpers
Los Built-In Helpers son helpers pre-construidos por handlebars para nuestra
comodidad. Por nombrar algunos, vamos a ver bloques pre-construidos que nos
permiten hacer plantillas condicionales, contra-condicionales e iteraciones:

Helper If
<div class="libro">
{{#if autor}}
<h1>{{nombre}} {{apellido}}</h1>
{{/if}}
</div>
Helper Unless
<div class="log">
{{#unless licencia}}
<h3 class="warning">ADVERTENCIA: No tiene permisos
suficientes</h3>
{{/unless}}
</div>
Helper Each
<ul class="lista-personas">
{{#each personas}}
<li>{{this}}</li>
{{/each}}
</ul>
PARTIALS
Los partials o plantillas parciales son plantillas que nos permiten hacer
reutilización de código guardándolo en una de estas plantillas parciales y
llamandolas con un helper pre-construido. Por defecto el directorio de las
plantillas parciales se encuentra dentro de “ root/views/partials/” pero puede ser
cambiado con la opción de configuración partialsDir="views/partials/". Podemos
usar plantillas parciales entonces de la siguiente manera :
//main.js
<div class="post">
{{> mensaje etiqueta="h1" }}
<h1>Comentarios</h1>
{{#each comentario}}
{{> mensaje etiqueta="h2" }}
{{/each}}
</div>
//views/partials/mensaje.hbs
<{{tagName}}>
By {{author.firstName}} {{author.lastName}}
</{{tagName}}>
1. https://github.com/ericf/express-handlebars

Handlebars

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Handlebars

Загружено:

Авторское право:

Доступные форматы

NODE.

npm install --save express-handlebars

Ahora que tenemos instalado handlebars tenemos que “decirle” , es decir

Con la primer línea estamos registrando un nuevo motor de vistas y la extensión

const ehbs = require("express-handlebars");

Estos directorios se pueden cambiar también usando las propiedades de

Con estas líneas de código estamos :

El método .static() nos permite configurar el directorio desde donde se van a

app.use([path,] callback [, callback...])

El parámetro path nos permite registrar un middleware con una URL

const hbs = exphbs.create({

Вам также может понравиться

Handlebars

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Handlebars

Загружено:

Авторское право:

Доступные форматы

NODE.

npm install --save express-handlebars

Ahora que tenemos instalado handlebars tenemos que “decirle” , es decir

Con la primer línea estamos registrando un nuevo motor de vistas y la extensión

const​ ehbs = ​require​(​"express-handlebars"​);

Estos directorios se pueden cambiar también usando las propiedades de

Con estas líneas de código estamos :

El método .static() nos permite configurar el directorio desde donde se van a

app.use([path,] callback [, callback...])

El parámetro path nos permite registrar un middleware con una URL

const​ hbs = exphbs.create({

Вам также может понравиться

const ehbs = require("express-handlebars");

const hbs = exphbs.create({