What is hbs?
The hbs package is a Handlebars view engine for Express. It allows you to use Handlebars templates to render HTML pages in your Express applications.
What are hbs's main functionalities?
Registering Partials
This feature allows you to register partials, which are reusable components that can be included in other templates. The code sample demonstrates how to register partials located in the 'views/partials' directory.
const hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
Using Helpers
Helpers are functions that can be used within your templates to perform specific tasks. The code sample shows how to register a helper named 'scream' that converts text to uppercase.
const hbs = require('hbs');
hbs.registerHelper('scream', function(text) {
return text.toUpperCase();
});
Rendering Views
This feature allows you to render views using Handlebars templates. The code sample demonstrates setting up an Express application to use hbs as the view engine and rendering an 'index' view with a title.
const express = require('express');
const hbs = require('hbs');
const app = express();
app.set('view engine', 'hbs');
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' });
});
app.listen(3000);
Other packages similar to hbs
express-handlebars
express-handlebars is another Handlebars view engine for Express. It offers more features and flexibility compared to hbs, such as layout support and advanced configuration options.
pug
Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. Unlike hbs, which uses Handlebars syntax, Pug uses its own unique syntax that is more concise.
ejs
EJS (Embedded JavaScript) is a simple templating language that lets you generate HTML markup with plain JavaScript. It is similar to hbs in that it integrates well with Express, but it uses a different syntax and offers different features.
hbs
Express.js view engine wrapper for
handlebars.js, an extension of
Mustache template language.
Why
While Handlbars.js is already a Node.js module, it cannot be used directly as
an Express.js view engine. This module will fill that role until Handlebars.js
adds Express.js view engine support directly.
Installation
npm install hbs
Usage
To set hbs as default view engine:
app.set("view engine", "hbs");
To your own version of Handlebars:
require('hbs').handlebars = require('/path/to/handlebars');
or
require('hbs').handlebarsPath = '/path/to/handlebars';
Tricks
Handlebars support view helper functions which comes in handy. For example, following
code allow view templates to affect head section which is typically rendered from layout
template.
layout.hbs
<html>
<head>
<title>{{page_title}}</title>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/{{app_name}}.js" type="text/javascript" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="common.css">
<link type="text/css" rel="stylesheet" href="{{app_name}}.css">
</head>
<body>
{{{body}}}
</body>
</html>
myview.hbs
{{#properties}}
"app_name": "myapp",
"page_title": "My View"
{{/properties}}
<div>blah</div>
...
view rendering code
var options = {
cache: true,
compile: true,
locals {
...
},
blockHelpers: {
properties: function (context, fn) {
var props = JSON.parse("{" + fn(this) + "}");
for (var prop in props) {
if (props.hasOwnProperty(prop)) {
context[prop] = props[prop];
}
}
return "";
}
}
};
res.render("myview", options);
Migrating from 0.0.3 from 0.0.2
Handlebars' block-helpers now needs to be in blockHelpers
(see example above) instead of locals
.