Key Concepts

Review core concepts you need to learn to master this subject

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
    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