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

hbs npm

Question

Estoy intentando hacer un proyecto HelloWorld simple con Node.js | Express usando Handlebars.js como motor de plantilla de servidor.

El problema es que no pude encontrar ningún ejemplo de uso de dicha cadena, especialmente con vista múltiple.

Por ejemplo, me gustaría definir la vista de encabezado:

<header>
  <span>Hello: {{username}}</span>
</header>

Y úsala en cada página con otras vistas.

Tal vez estoy pensando en estos puntos de vista de una manera equivocada, pensé que la vista es un tipo de control que puedo reutilizar en cualquier página dentro de cualquier otra vista.

Agradezco cualquier enlace al tutorial o (mucho mejor) proyecto de código abierto del que puedo aprender.

Answer 1

Actualmente estoy usando la implementación de "manillar-express" de ericf, y considero que es excelente:

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

La clave para recordar es que en el expreso, a diferencia del navegador, los manubrios se activan durante la fase de visualización de visualización. El código del cliente terminará siendo simplemente HTML, como si hubiera usado bigote dentro de un contexto PHP.

Answer 2

Necesita usar parciales.

Consulte https://github.com/donpark/hbs/tree/master/examples/partial para ver un buen ejemplo del uso de parciales.

Aquí hay otro ejemplo http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Answer 3

Sé que esto se había pedido hace mucho tiempo, pero nadie ha mostrado una respuesta en esta publicación. Entonces lo haré aquí. Para asegurar que todos estén en la misma página, seré prolijo en mi respuesta. Me disculpo de antemano si parece demasiado simplista.

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

archivo: server.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 más o menos 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: main.hbs

...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}

Para indicar un parcial, usa esta sintaxis: {{> partialsNames }} .

Answer 4

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

Supongamos que tienes:

+ 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 utilizando:

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

Entonces accedes de esta manera:

First example: {{> footer }} 
Second example: {{> myFooter }}

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