Key Concepts

Review core concepts you need to learn to master this subject

Handlebars.compile()

Handlebars {{each}} block helper

Handlebars block helpers

The Handlebars.js JavaScript Library

Handlebars.js and the <script> Element

Handlebars {{if}} block helper

The Handlebars {{else}} expression

Handlebars.compile()

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

Handlebar.compile() can be used to produce a templating function. A template string with expressions must be passed into Handlebar.compile(). That function then takes an object as an argument, interpolates the object’s values into the template expressions, and returns a completed HTML string.

Handlebars {{each}} block helper

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

Handlebars {{each}} block helper is a built-in helper expression that can accept an array to iterate through. Inside an {{each}} block, this serves as a placeholder for the current iteration value.

Handlebars block helpers

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

Handlebars comes with built-in block helpers which allow us to embed HTML or other expressions in between helper expression tags.

The starting expression of the block helper will have a # that appears before a keyword, and the ending expression will have a / followed by the same keyword to denote the end.

The Handlebars.js JavaScript Library

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

Handlebars.js is a Javascript library used to create reusable webpage templates. The templates are combination of HTML, text, and expressions. The expressions are included in the html document and surrounded by double curly braces.

These expressions are placeholders for content to be inserted by our Handlebars.js code in our js document. When the compiled templated function is called, values are substituted into the expressions.

Handlebars.js and the <script> Element

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

An HTML <script> element with type value of text/x-handelbars-template can be used to contain Handlebars.js template text and expressions. This allows writing Handlebars.js templates in an HTML document.

Handlebars {{if}} block helper

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

The Handlebars {{if}} block helper is one of the built-in helpers that will conditionally render a block of code. The given block of code contains an example of the usage of it.

The Handlebars {{else}} expression

const template = '<span>{{greetingMsg}}</span>'; const templateFunction = Handlebars.compile(template); const html = templateFunction({ greetingMsg: 'Greetings from the club!' }); console.log(html); // <span>Greetings from the club!</span>

The Handlebars {{else}} expression can be inserted into an {{if}} block helper. Template contents inside the else section comes into play when the previous condition(s) are falsy. In the given example, isAdult is set to false. Hence, You can enter the ride. will not be in the returned template string.

Learn Handlebars
Lesson 1 of 1
  1. 1
    In this lesson, you will expand your ability to create dynamic web pages by learning about an external library, Handlebars.js! A library is a collection of code that is already written that makes…
  2. 2
    Watch the video to get an in-depth overview of the code used in the previous exercise. In case you want to watch it at a later time, here is the YouTube link. The major steps of using Handleb…
  3. 3
    The power of Handlebars lies in its reusability and extensibility. Handlebars expressions allow us to accomplish this. Inside a script, Handlebar expressions are wrapped with double braces, {{ …
  4. 4
    So far, you’ve only used Handlebars expressions to insert values in your templates. If you want to check for a specific object property before you insert a value, Handlebars provides you with the {…
  5. 5
    In the previous exercise, you used {{if}} to determine if the compiled HTML should include a block of code. But, if that argument turns out to be falsy then you’ll just have a blank section in your…
  6. 6
    Another helper that Handlebars offers is the {{each}} block which allows you to iterate through an array. Just like the {{if}} block, there is an opening {{#each}} expression and closing {{/each}} …
  7. 7
    Using {{this}} also gives you access to the properties of the element being iterated over. For instance, if you’re using the following array inside the context object: const context = { someArr…
  8. 8
    In the previous exercises, you’ve mostly worked with individual expressions, however, you have the ability to combine expressions! In this exercise, you will combine the {{if}} block and the {{eac…
  9. 9
    Great work you now know the fundamentals of using Handlebars! Let’s recap a few key points: * Handlebars is an external library used to create templates which are a mix of HTML, text, and expressi…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo