The handlebars-layouts npm package is an extension for Handlebars that provides layout and partial support, allowing you to create complex templates with reusable components and layouts. It simplifies the process of managing nested templates and layouts in Handlebars.

What are handlebars-layouts's main functionalities?

Define Layouts

This feature allows you to define layouts that can be extended by other templates. In this example, a base layout is extended, and content is inserted into the 'body' section.


const Handlebars = require('handlebars');
const layouts = require('handlebars-layouts');
Handlebars.registerHelper(layouts(Handlebars));

const source = `
{{#extend "base"}}
  {{#content "body"}}
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  {{/content}}
{{/extend}}
`;

const template = Handlebars.compile(source);
const context = { title: 'Hello, World!', message: 'This is a message.' };
const result = template(context);
console.log(result);

Nested Layouts

This feature demonstrates how to use nested layouts. A base layout is extended by a child layout, which is further extended by a page template. This allows for complex and reusable template structures.


const Handlebars = require('handlebars');
const layouts = require('handlebars-layouts');
Handlebars.registerHelper(layouts(Handlebars));

const baseLayout = `
<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  {{#block "body"}}{{/block}}
</body>
</html>
`;

const childLayout = `
{{#extend "base"}}
  {{#content "body"}}
    <div class="container">
      {{#block "content"}}{{/block}}
    </div>
  {{/content}}
{{/extend}}
`;

const pageTemplate = `
{{#extend "child"}}
  {{#content "content"}}
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  {{/content}}
{{/extend}}
`;

Handlebars.registerPartial('base', baseLayout);
Handlebars.registerPartial('child', childLayout);

const template = Handlebars.compile(pageTemplate);
const context = { title: 'Nested Layouts', message: 'This is a nested layout example.' };
const result = template(context);
console.log(result);

Dynamic Partials

This feature allows for dynamic partials, where the partial to be included is determined at runtime. In this example, the partial name is looked up from the context and the corresponding partial is rendered.


const Handlebars = require('handlebars');
const layouts = require('handlebars-layouts');
Handlebars.registerHelper(layouts(Handlebars));

const source = `
{{#extend "base"}}
  {{#content "body"}}
    {{> (lookup . 'partialName') }}
  {{/content}}
{{/extend}}
`;

const baseLayout = `
<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  {{#block "body"}}{{/block}}
</body>
</html>
`;

const partials = {
  partial1: '<p>This is partial 1</p>',
  partial2: '<p>This is partial 2</p>'
};

Handlebars.registerPartial('base', baseLayout);
Handlebars.registerPartial('partial1', partials.partial1);
Handlebars.registerPartial('partial2', partials.partial2);

const template = Handlebars.compile(source);
const context = { title: 'Dynamic Partials', partialName: 'partial1' };
const result = template(context);
console.log(result);

Other packages similar to handlebars-layouts

Changelog

Source

0.3.0 - 0.3.1

Features:

Refactor.
Switched from Grunt to Gulp.
Improved tests including coverage.

Readme

Source