Key Concepts

Review core concepts you need to learn to master this subject

The Handlebars.js JavaScript Library

Handlebars.js and the <script> Element

Handlebars block helpers

The Handlebars.js JavaScript Library

<script id="spaceCraft" type="text/x-handlebars-template"> <p>{{spacecraftName}} landed the first human on the Moon.</p> </script>

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

<script id="spaceCraft" type="text/x-handlebars-template"> <p>{{spacecraftName}} landed the first human on the Moon.</p> </script>

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

<script id="spaceCraft" type="text/x-handlebars-template"> <p>{{spacecraftName}} landed the first human on the Moon.</p> </script>

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.

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