Saltar al contenido

Node.js + Express + Handlebars.js + vistas parciales

Si encuentras alguna parte que no entiendes puedes comentarlo y trataremos de ayudarte lo mas rápido que podamos.

Solución:

Sé que esto se había preguntado hace mucho tiempo, pero nadie ha mostrado una respuesta en esta publicación. Así que lo haré aquí. Para asegurarme de que todos estén en la misma página, seré detallado en mi respuesta. Pido disculpas de antemano si parece demasiado simplista.

En su archivo server.js (o app.js, donde haya definido handlebars como su motor de visualización). Dependiendo de lo que esté usando como paquete npm, como hbs o express-handlebars, etc., puede verse diferente, pero similar a esto. Nota: estoy usando express-handlebars en este ejemplo.

archivo: servidor.js

...
var express     = require( 'express'),
    hbs         = require( 'express-handlebars' ),
    app         = express();
...

app.engine( 'hbs', hbs(  
  extname: 'hbs', 
  defaultLayout: 'main', 
  layoutsDir: __dirname + '/views/layouts/',
  partialsDir: __dirname + '/views/partials/'
 ) );

app.set( 'view engine', 'hbs' );

...

y su estructura de archivos debería verse así:

| /views/   
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js

Y su archivo main.hbs debería verse así:

archivo: principal.hbs

...
> header 
...
 various other stuff 
...
> footer 

Para denotar un parcial se utiliza esta sintaxis: > partialsNames .

Usando https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs

Supongamos que tiene:

+ views
  - index.hbs
  + partials
    - footer.hbs

Debe registrar qué carpeta contiene sus parciales:

hbs.registerPartials(__dirname + '/views/partials');

Los parciales tendrán el nombre exacto que tiene el archivo. También puede registrar nombres específicos para sus parciales usando:

hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8'));

Luego accedes así:

First example: > footer  
Second example: > myFooter 

Ejemplo completo aquí: https://github.com/donpark/hbs/tree/master/examples/partial

Actualmente estoy usando la implementación de ericf de “handlebars-express”, y me parece excelente:

https://github.com/ericf/express3-handlebars

los key Lo que hay que recordar es que en express, a diferencia del navegador, el manillar se activa durante la fase de renderizado de la vista. El código del cliente terminará siendo simplemente HTML, como si hubiera usado bigote dentro de un contexto PHP.

Si sostienes alguna incertidumbre y capacidad de enriquecer nuestro ensayo te sugerimos ejecutar un comentario y con placer lo ojearemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *