Handlebars templates with Express 3

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

comments powered by Disqus