Elevate Web Development with Handlebars.js
About
Handlebars is a templating language that allows you to write HTML with placeholders for data. It is a superset of Mustache, so any valid Mustache template is a valid Handlebars template. Also, it can be used on the server or the client.
Installation
To install Handlebars, use npm:
npm install handlebars
Usage
To use Handlebars, you need to compile a template. You can do this with the Handlebars.compile
function:
import Handlebars from "handlebars";
const template = Handlebars.compile("Hello {{name}}!");
const context = {name: "World"};
const html = template(context);
console.log(html); // Hello World!
Read the template from a file
compile.ts file would look like this:
import Handlebars from "handlebars";
const template = Handlebars.compile(await fs.readFile("template.hbs", "utf8"));
const context = {name: "World"};
const html = template(context);
template.hbs file would look like this:
<!-- Path: template.hbs -->
Hello {{name}}!
Partials
Partials are templates that are included in other templates. They are useful for reusing the same HTML in multiple places.
To register a partial, use the Handlebars.registerPartial
function:
import Handlebars from "handlebars";
Handlebars.registerPartial("helloPartial", "Hello {{name}}!");
Then, you can use the partial in a template:
<!-- Path: template.hbs -->
{{> helloPartial}}
Send parameters to partials
<!-- Path: template.hbs -->
{{> helloPartial name="World"}}
Helpers
Helpers are functions that can be used in templates. They are useful for adding logic to templates. Also, there are some built-in helpers.
Built-in helpers
if
The if
helper conditionally renders a block. It can be used with else
and else if
:
<!-- Path: template.hbs -->
{{#if name}}
Hello {{name}}!
{{else}}
Hello World!
{{/if}}
unless
The unless
helper conditionally renders a block if the expression is false. It can be used with else
:
<!-- Path: template.hbs -->
{{#unless name}}
Hello World!
{{else}}
Hello {{name}}!
{{/unless}}
each
The each
helper iterates over an array and renders a block for each item:
import Handlebars from "handlebars";
const template = Handlebars.compile(await fs.readFile("template.hbs", "utf8"));
const context = {items: ["one", "two", "three"]};
const html = template(context);
console.log(html);
with
The with
helper changes the context for a block:
<!-- Path: template.hbs -->
{{#with user}}
Hello {{name}}!
{{/with}}
Custom helpers
You can create your own helpers. To register a helper, you can use the Handlebars.registerHelper
function:
import Handlebars from "handlebars";
Handlebars.registerHelper("isEquals", (arg1, arg2, options) => {
return arg1 === arg2 ? options.fn(this) : options.inverse(this);
});
Then, you can use the helper in a template:
<!-- Path: template.hbs -->
{{#isEquals name "World"}}
Hello World!
{{else}}
Hello {{name}}!
{{/isEquals}}
Partials with parameters
<!-- Path: template.hbs -->
{{> helloPartial name="World"}}
Conclusion
Handlebars is a templating language that allows you to write HTML with placeholders for data. It is a superset of Mustache, so any valid Mustache template is a valid Handlebars template. Also, it can be used on the server or the client.