Handlebars

Introduction

Provides Drupal integration with Handlebars.js.
This module is ideal for Drupal backend developers that are comfortable using Twig and do not want the overhead of working with React or any other complex Javascript framework that requires compilation.

Handlebars.js

Handlebars.js is a great library that has made writing JS+HTML a breeze. That in and of itself, has nothing to do with Drupal really. What does? Well the one thing I wish was easier about Handlebars.js is adding includes to your JS files - that's where Drupal comes in.

Handlebars is ideal quickly building decoupled applications, maintaining the same markup and CSS from your existing Drupal site.

Drupal 10 Instructions

When you enable the module, nothing happens by default, until you define the Handlebars templates, by defining them as Drupal libraries.

The libraries are defined like you would do for a Js library but you will provide the path for the Handlebars templates. Make sure that handlebar template name is exactly same as the library name.

Example of my_module.libraries.yml

# This key needs match the filename for the .handlebars template.
article.block.demo:
  version: 1.x
  # Specify that this library is a Handlebars template.
  type: handlebars_template
  js:
    # Specify the location of the template.
    templates/article.block.foo.handlebars: { }

The templates need to have the Handlebars syntax, see https://handlebarsjs.com/guide/

Example of templates/article.block.demo.handlebars

<h1>Here is the content of foo: {{ foo }}</h1>

The next step is to add Js code to call the renderer, passing the path to the object and data i.e.

// Creating the data object, the data source can be json from a REST endpoint. 
let data = {
  foo: 'bar'
};

// Render the Handlebars template using the data.
var html = handlebarsRenderer.render('article.block.demo', data);

// Update the container with the rendered content.
var el = document.getElementById("container");
el.innerHTML = html;

Other examples

Decoupled admin menu. This is an example of rendering the main menu using REST API. The markut of the template is the same as the Twig template, so the styling works out of the box, see Demo

Decoupled e-commerce. This is an example of using a Json/XML feed from an online store to render the products using Handlebars templates, see Demo

Read about Partials and more information on see README.md.

Check this post on Medium

Implementing decoupled menus using Handlebars, in 3 steps

Drupal 7 Instructions

Create your code in a [file name].tpl.hbr file.
From your code call one of the following:

handlebars_add_template(array(
  'template' => [file name],
  'path' => drupal_get_path('module', '[module name]'),
));

$form['element']['#attached']['hbr'] = (
  'template' => [file name],
  'path' => drupal_get_path('module', '[module name]'),
);

function modulename_handlebars() {
  return array(
    array(
      'template' => [file name],
      'path' => drupal_get_path('module', '[module name]'),
    ),
  );
}

Et voila! Then just go about your regular JS and call that particular template with the corresponding ID. Some more potential features:

• Advanced debugging settings
• Theme suggestions
• Place handlebars script tags in header or footer.
• Functionality for template "partials"