javascript - Partiales con Node.js+Express+Hogan.js
viewengine (6)
Al menos en Express 4+, los parciales solo funcionan fuera de la caja. Puede usar Express-generator (desde npm) con la opción --hogan o -H.
Después de hacer eso, necesitas agregar parciales al método de render:
router.get(''/'', function(req, res, next) {
res.render(''index'',
{
title: ''My Site'',
partials: {header: ''header''}
});
});
Luego, en tu plantilla usa {{> xxx}}
<body>
{{> header }}
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
</body>
NOTA: esto tiene header.hjs en vistas
Estoy desarrollando un sitio con Node.js + Express y lo uso como el motor de visualización Hogan.js.
Este es mi archivo app.js :
/**
* Module dependencies.
*/
var express = require(''express'')
, routes = require(''./routes'')
, user = require(''./routes/user'')
, http = require(''http'')
, path = require(''path'');
var app = express();
app.configure(function(){
app.set(''port'', process.env.PORT || 3000);
app.set(''views'', __dirname + ''/views'');
app.set(''view engine'', ''hjs'');
app.use(express.favicon());
app.use(express.logger(''dev''));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser(''your secret here''));
app.use(express.session());
app.use(app.router);
app.use(require(''less-middleware'')({ src: __dirname + ''/public'' }));
app.use(express.static(path.join(__dirname, ''public'')));
});
app.configure(''development'', function(){
app.use(express.errorHandler());
});
app.get(''/'', routes.index);
app.get(''/about'', routes.about);
app.get(''/users'', user.list);
http.createServer(app).listen(app.get(''port''), function(){
console.log("Express server listening on port " + app.get(''port''));
});
El archivo /routes/index.js es:
/*
* GET pages.
*/
exports.index = function(req, res){
res.render(
''index'',
{
title: ''Home Page'',
author: ''Bruce Wayne''
}
);
};
exports.about = function(req, res){
res.render(
''about'',
{
title: ''About Page'',
author: ''Bruce Wayne''
}
);
};
En la carpeta /views , hay:
| - part.hjs
| - index.hjs
| - cv.hjs
El archivo part.hjs es:
<h3>Hello {{ author }}</h3>
El archivo index.hjs es:
<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.
Y el archivo about.hjs es:
<h1>Title: {{ title }}</h1>
{{> part }}
I''m not Joker.
Tengo dos preguntas:
- ¿Cómo puedo usar correctamente los parciales en mis páginas? (este código no funciona)
- ¿Puedo usar el mismo "título" para dos o más páginas sin repetir la asignación de valores en el archivo
/routes/index.js?
Saludos cordiales, Vi.
En cuanto a su pregunta de parciales, si usa consolidate.js simplemente puede hacer:
res.render(''index'', {
partials: {
part : ''path/to/part''
}
});
Esto es un problema. El soporte parcial es difícil de conseguir en Express 3.
Su mejor apuesta es: https://github.com/visionmedia/consolidate.js npm install consolidate
Estos parches adoptan diferentes enfoques para agregar parciales a Hogan:
- https://github.com/visionmedia/consolidate.js/pull/51
- https://github.com/visionmedia/consolidate.js/pull/29
Desafortunadamente, el motor no tiene un gancho para parciales basados en sistemas de archivos de forma nativa, por lo que creo que la gente está confundida acerca de cómo y dónde deben implementarse los parciales. Terminé con la implementación Dust.js de LinkedIn, ya que el soporte parcial ya estaba allí. Master realmente tiene un soporte aún mejor, además, ayer envié un parche para rutas relativas.
Josh
He encontrado una solución para la primera pregunta.
En primer lugar, quité hjs :
npm remove hjs
Luego, instalé el paquete hogan-express :
npm install hogan-express
Además, app.js :
/**
* Module dependencies.
*/
var express = require(''express'')
, routes = require(''./routes'')
, user = require(''./routes/user'')
, http = require(''http'')
, path = require(''path'');
var app = express();
app.engine(''html'', require(''hogan-express''));
app.enable(''view cache'');
app.configure(function(){
app.set(''port'', process.env.PORT || 3000);
app.set(''views'', __dirname + ''/views'');
app.set(''view engine'', ''html'');
app.use(express.favicon());
app.use(express.logger(''dev''));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser(''your secret here''));
app.use(express.session());
app.use(app.router);
app.use(require(''less-middleware'')({ src: __dirname + ''/public'' }));
app.use(express.static(path.join(__dirname, ''public'')));
});
app.configure(''development'', function(){
app.use(express.errorHandler());
});
app.get(''/'', routes.index);
app.get(''/users'', user.list);
http.createServer(app).listen(app.get(''port''), function(){
console.log("Express server listening on port " + app.get(''port''));
});
Y routes/index.js :
exports.index = function(req, res) {
res.locals = {
title: ''Title'',
};
return res.render(
''index'',
{
partials:
{
part: ''part'',
}
}
);
};
Ahora, en /views hay index.html , part.html . El archivo part.html contiene:
<h1>{{ title }}</h1>
El archivo index.html contiene:
{{> part}}
Hello world!
Por lo tanto, funciona bien.
Para usar los parciales con express + hogan, simplemente haga lo siguiente:
app.get(''/yourRoute'', function(req, res){
res.render(''yourPartial'', function(err,html){
var partialHTML = html;
res.render(''yourMainView'', { myPartial: partialHTML }, function(err,html){
res.send(html);
});
});
}
Y ahora, suMainView.html:
<p>Something Something Something</p>
{{{partialHTML}}}
<p>Bla Bla Bla</p>
¡Observe el triple ''{'' en lugar del doble como suele hacer ¡Eso le dice a hogan (bigote) que analice esto como HTML en lugar de una cadena!
Eso es.
Yo usaría mmm lugar de hjs .
https://github.com/techhead/mmm
Descargo de responsabilidad: escribí el paquete.
Simplemente reemplace todas las apariciones de hjs con mmm y los parciales comenzarán a funcionar. Hay mucha más información y un ejemplo en el enlace de arriba.
En cuanto a su otra pregunta, si desea compartir propiedades en varias vistas, tiene un par de opciones.
Cuando llama a res.render(name, options) , las options se fusionarán en res.locals y app.locals antes de pasar al motor de renderizado. Por lo tanto, para establecer una propiedad para toda la aplicación, simplemente puede asignarla a app.locals .
app.locals.title = "Default Title"; // Sets the default title for the application
Este concepto realmente se aplica a casi cualquier Express 3 View Engine.
Sin embargo, específicamente para mmm , consulte la sección bajo Lógica de presentación para conocer más formas de vincular valores a una plantilla o conjunto de plantillas.