github.io/content/blog/apprentice/handlebars.en.md

date	draft	aliases	categories	series	tags	chroma	toc	title	description	docs
2022-05-25T09:14:23Z	false		documentation	apprentice	javascript	true	true	Handlebars.js	Handlebars.js is a (HTML) templating engine that runs mainly in the browser, but may also run on any server that has node.js installed.	url name https://handlebarsjs.com/guide/ Handlebars official guide

Handlebars.js is a templating engine like jinja2, but entirely in JavaScript.

Personally I've only found pug templates very nice to work with as I love the minimal syntax.

What makes handlebars cool is it's ability to render templates both server and client side, if you're running node.js on the server.

Running it in the frontend is super easy, check this example from the handlebars docs;

{{< highlight html >}}

{{< /highlight >}}

Basics

The arguments of this template function can be accessed within curly braces and supports full js objects that may be accessed with dot notation just like you'd expect.

The "evaluation context" may be switched using "{{#with something}}{{/with}}" or "{{#each something}}{{/each}}" for looping over some list.

There is also template comments using the syntax "{{! }}" or "{{!-- --}}" to allow "mustaches like }}". Handlebars comments will be stripped when rendering, but html comments passes through.

Helpers and Partials

Handlebars helpers enable you to register javascript functions that may run inside templates. To register a helper run; {{< highlight js "lineNos=false" >}}Handlebars.registerHelper('name', function (string) {return 'SomeString'}){{< /highlight >}} This function may use the evaluation context as "this" within the function.

Or to make it a block helper, take two arguments; {{< highlight js "lineNos=false" >}}Handlebars.registerHelper('name', function (items, options) {return 'SomeString'}){{< /highlight >}}

The normal helpers are called by "{{helpername [args...]}}". Block helpers switch the evaluation context. The helper function for these always take options and usually context as arguments.

You can also register partials like helpers with; {{< highlight js "lineNos=false" >}}Handlebars.registerPartial('name', 'template string with {{blocks}}'){{< /highlight >}}

It should be noted that handlebars by default html escapes all results from these blocks/helpers. If you want to avoid this then "triple mustaches" is what you're looking for. Calling any helper function like "{{{helpername}}}" will bypass the html escaping.

Examples

This script is running on this page;

{{< highlight js >}}{{% asset "apprentice/handlebars.js" %}}{{< /highlight >}}

Output

{{< raw >}}

{{< script "apprentice/handlebars.js" >}} {{< /raw >}}