Handlebars.js es un motor de plantillas similar al módulo ejs de node.js, pero más potente y fácil de usar. Garantiza plantillas mínimas y es un motor sin lógica que mantiene la vista y el código separados. Se puede usar con express como el módulo hbs, disponible a través de npm. HandleBars se puede usar para representar páginas web en el lado del cliente a partir de datos en el lado del servidor.
Comando para instalar el módulo hbs:
npm i hbs
Para usar handlebars en express, necesitamos almacenar el código HTML en una extensión .hbs en la carpeta ‘views’ en el directorio de origen, ya que hbs busca las páginas en la carpeta de vistas.
Lo primero que debemos hacer en el archivo index.js es solicitar el módulo hbs
var express = require('express')
var hbs = require('hbs')
var app = express()
Ahora, necesitamos cambiar el motor de visualización predeterminado.
app.set('view engine', 'hbs')
En caso de que el directorio de vistas no sea deseable, puede cambiar la ruta de vista con el siguiente comando:
app.set('views', <pathname>)
Ahora vamos a crear un archivo demo.hbs en nuestro directorio de vistas con el siguiente contenido:
<!DOCTYPE html> <html> <body> <p>This is a Demo Page on localhost!</p> </body> </html>
Ahora, renderizamos nuestra página web a través de express al servidor local.
app.get('/', (req, res)=>{
res.render('demo')
})
app.listen(3000)
Ahora, abra su navegador y escriba localhost:3000 en la dirección web y verifique la página web en su servidor.
Ahora veremos cómo podemos vincular dinámicamente las páginas a los datos del lado del servidor.
En index.js, declaramos un objeto de demostración; en la práctica, el objeto puede ser el resultado del cuerpo de la solicitud y/o consulta de la base de datos.
var demo = {
name : 'Rohan',
age : 26
}
app.get('/', (req, res)=>{
res.render('dynamic', {demo : demo})
})
Aquí enviamos el objeto de demostración como demostración a nuestra página de hbs. Podemos recuperar la información en dynamic.hbs presente en la carpeta de vistas.
<!DOCTYPE html>
<html>
<body>
<p>{{demo.name}} is {{demo.age}} years old.</p>
</body>
</html>
Producción:
Rohan is 26 years old
Dados múltiples valores, podemos iterar sobre todos ellos para realizar la misma funcionalidad/visualización para cada uno de los elementos.
Tomemos un ejemplo, agregue el siguiente código a su index.jsy ejecute el servidor y obtenga una respuesta.
var projects = {
name : 'Rahul',
skills : ['Data Mining', 'BlockChain Dev', 'node.js']
}
app.get('/projects', (req, res)=>{
res.render('projects', {project : project});
})
donde vistas/proyectos.hbs se parece a:
<!DOCTYPE html>
<html>
<body>
{{projects.name}} has the following skills : <br>
{{#each projects.skills}}
{{this}} <br>
{{/each}}
</body>
</html>
Producción:
Rahul has the following skills : Data Mining BlockChain Dev node.js
Publicación traducida automáticamente
Artículo escrito por shubhamsachdeva593 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA