Handlebars in Express apps can use the express-hbs package to add templating support on the server side. This module provides full layout and partial support.
Check out the [update version] (http://derpturkey.com/handlebars-templates-with-express-4/)of this article using 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'),
server = express();
// set the view engine
server.set('view engine', 'hbs');
// configure view engine
server.engine('hbs', hbs.express3({
defaultLayout: __dirname + '/views/layouts/default.hbs',
partialsDir: __dirname + '/views/partials',
layoutsDir: __dirname + '/views/layouts'
}));
// configure views path
server.set('views', __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