I'm developing a site with Node.js + Express and using as view engine Hogan.js.
This is my file 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'));
});
The file /routes/index.js
is:
/*
* 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'
}
);
};
In /views
folder, there are:
|- part.hjs
|- index.hjs
|- cv.hjs
The file part.hjs
is:
<h3>Hello {{ author }}</h3>
The file index.hjs
is:
<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.
And the file about.hjs
is:
<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.
I've two questions:
- How can I use properly the partials in my pages? (this code doesn't work)
- Can I use the same "title" for two or more pages without repeat the values assignment in file
/routes/index.js
?
Best regards, Vi.
This is a problem. Partial support is difficult to come by in Express 3.
Your best bet is: https://github.com/visionmedia/consolidate.js
npm install consolidate
These patches take different approaches to adding partials for Hogan:
Unfortunately, the engine doesn't have a hook for filesystem based partials natively, so I think people are confused about how and where partials should be implemented. I ended up with LinkedIn's Dust.js implementation, since partial support was already there. Master actually has even better support, plus I submitted a patch yesterday for relative paths.
Josh
At least in Express 4+, partials just work out of the box. You can use express-generator (from npm) with --hogan or -H option.
After doing that, you need to add partials to the render method:
Then, in your template use {{ > xxx }}
NOTE: this has header.hjs in views
I've found a solution for the first question.
First of all, I removed
hjs
:Then, I installed the package
hogan-express
:Furthermore, I edited
app.js
:And
routes/index.js
:Now, in
/views
there areindex.html
,part.html
. The filepart.html
contains:The file
index.html
contains:So, It works fine.
To use partials with express+hogan, just do the following:
And now, yourMainView.html:
Notice the triple '{' instead of double as you usually do! That telling hogan (mustache) to parse this as HTML rather then a string!
That's it.
As for your partials question, if you use consolidate.js you can simply do:
I would use
mmm
instead ofhjs
.https://github.com/techhead/mmm
Disclaimer: I wrote the package.
Just replace all occurrences of
hjs
withmmm
and partials will start working. There is a lot more information and an example at the link above.As for your other question, if you want to share properties across multiple views, you have a couple of options.
When you call
res.render(name, options)
, theoptions
will actually be merged ontores.locals
andapp.locals
before being passed to the rendering engine. Therefore to set an app-wide property, you can simply assign it toapp.locals
.This concept really applies to just about any Express 3 View Engine.
However, for
mmm
specifically, please see the section under Presentation Logic for more ways to bind values to a template or set of templates.