In a previous article I discussed adding server side Handlebars templates to Express 3 using express-hbs package. This article is an update that discusses Express 4.
Setup
Configuration is quite simple. You first set the view engine
in express. Then provide configuration information for the engine. Finally you set a default path for the views.
By default this module looks for files with the .hbs
extension. You can configure the partials path view partialsDir
and the layout path vis layoutDir
. Additionally you can set the default layout via defaultLayout
.
var express = require('express')
, hbs = require('express-hbs')
, app
;
// create Express 4 App
app = express();
// set the view engine
app.set('view engine', 'hbs');
// configure the view engine
app.engine('hbs', hbs.express4({
defaultLayout: __dirname + '/views/layouts/default.hbs',
partialsDir: __dirname + '/views/partials',
layoutsDir: __dirname + '/views/layouts'
}));
// configure views path
app.set('views', path.join(__dirname,'/views'));
server.get('/', function(req, res) {
var user = {
first: 'Brian',
last: 'Mancini',
site: 'http://derpturkey.com',
age: 32
}
res.render('index', user);
});
server.listen(8000);
Views
Views get rendered by the router via the render
method. You can supply information to them in the form of an object.
Views can optionally have a layout provided in the json via the layout
property. You can also specify the layout inside the view.
The view in views/index.hbs
may look something like this:
{{!< main}}
{{{#contentFor 'head'}}}
<style type="text/css">
.header { background-color: #f0f6f6; }
</style>
{{{/contentFor}}}
Hello {{first}}!
This view a the layout named main
that, based on the configuration, will be located in views/layouts/main.hbs
Layouts
Creating a layout allow you to specify the default block {{{body}}}
of text as well as other blocks that can be override in the view, such as {{{block head}}}
.
Based on the configuration above, the default layout will be in views/layouts/main.hbs
<!DOCTYPE>
<html>
<head>
<title>Handlebars Test</title>
<style type="text/css">
body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
.box { box-sizing: border-box; }
.header { border-bottom: 1px solid #c0c0c0; padding: .75em 0; margin-bottom: 1.5em; }
.main { width: 70%; float: left; }
.sidebar { width: 30%; float: right; padding-left: 1.5em; }
</style>
{{{block head}}}
</head>
<div class="header">
<h1>Handlebar Testing</h1>
</div>
<div class="box main">
{{{body}}}
</div>
<div class="box sidebar">
{{> user}}
</div>
</html>
Partials
This example also uses a partial called user
that gets called with {{> user}}
.
Based on the configuration this partial will be located in views/partials/user.hbs
<ul class="user-info">
<li>{{first}} {{last}}</li>
<li>{{age}}</li>
<li><a href="{{site}}">{{site}}</a></li>
</ul>
For more information and more examples, refer to the documentation at https://github.com/barc/express-hbs