Learn
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 expressions.
- Handlebars uses expressions which are wrapped inside double braces like:
{{someVariable}}
- A script tag with a type of
"text/x-handlebars-template"
is used to deliver a template to the browser. Handlebar.compile()
returns a templating function from a template script intended for Handlebars.- A template created from
.compile()
will take an object as an argument and use it as context to generate a string containing HTML. - Handlebars has built in block helpers which can be included in a Handlebars script.
- Block helpers have a starting expression and an ending expression. The starting expression will have a
#
appears before a keyword. The ending expression will have the same keyword but with a/
character to denote the end. - The
{{if}}
will conditionally render a block of code. - An
{{else}}
expression can be inserted into anif
helper block and used as part of the conditional statement. {{each}}
is another built-in helper expression which accepts an array to iterate through.- In the block helper functions, the
{{this}}
expression gives context and serves as a placeholder for the current value.
Instructions
If you want to challenge yourself:
- Add more elements and properties to the array in the
languages
property. - Re-write the code in the code editor from scratch.
- Wrap an
{{each}
block inside an{{if}}
block. - Create a separate Handlebars script and insert the finished template into a different section of the web page.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.