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.

Learn Handlebars
Lesson 1 of 1
  1. 1
    Introduction to Handlebars
    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…
    Start
  2. 2
    Implementing Handlebars
    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…
    Start
  3. 3
    Using Handlebars expressions
    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, {{ …
    Start
  4. 4
    Handlebars "If" block helper
    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 {…
    Start
  5. 5
    Handlebars "Else" section
    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…
    Start
  6. 6
    Handlebars "Each" and "This" - Part I
    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}} …
    Start
  7. 7
    Handlebars "Each" and "This" - Part II
    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…
    Start
  8. 8
    Combining "If" and "Each"
    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…
    Start
  9. 9
    Review
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo