Templating With Handlebars
Learn to create semantic templates using a popular and lightweight templating engine, Handlebars!
Start
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()
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
- 1In 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…
- 2Watch 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…
- 3The 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, {{ …
- 4So 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 {…
- 5In 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…
- 6Another 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}} …
- 7Using {{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…
- 8In 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…
What you'll create
Portfolio projects that showcase your new skills
