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
The Handlebars.js JavaScript Library
Handlebars.js and the <script> Element
Handlebars.compile()
Handlebars block helpers
Handlebars {{if}} block helper
The Handlebars {{else}} expression
Handlebars {{each}} block helper
The Handlebars.js JavaScript Library
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
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.compile()
Handlebars.compile()
<script id="spaceCraft" type="text/x-handlebars-template">
<p>{{spacecraftName}} landed the first human on the Moon.</p>
</script>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 block helpers
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.
Handlebars {{if}} block helper
Handlebars {{if}} block helper
<script id="spaceCraft" type="text/x-handlebars-template">
<p>{{spacecraftName}} landed the first human on the Moon.</p>
</script>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
The Handlebars {{else}} expression
<script id="spaceCraft" type="text/x-handlebars-template">
<p>{{spacecraftName}} landed the first human on the Moon.</p>
</script>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.
Handlebars {{each}} block helper
Handlebars {{each}} block helper
<script id="spaceCraft" type="text/x-handlebars-template">
<p>{{spacecraftName}} landed the first human on the Moon.</p>
</script>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.
- 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…
- 9Great 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
Templating With Handlebars
Start