Course Material

Handlebars

A templating language used to generate HTML code.

Extra info

One thing I forgot in the lecture was that when you use the #each helper, the context is changed to the value you are iterating over. You can use ../ in the beginning to reference the parent context. Example:

Context:

{
    isLoggedIn: true,
    humans: [
        {id: 1, name: "Alice"},
        {id: 2, name: "Bob"}
    ]
}

Template:

<ul>
    {{#each humans}}
        <li>
            {{name}}
            {{#if ../isLoggedIn}}
                <a href="/humans/{{id}}/edit">Edit</a>
            {{/if}}
        </li>
    {{/each}}
<ul>

Generated HTML code:

<ul>
    <li>
        Alice
        <a href="/humans/1/edit">Edit</a>
    </li>
    <li>
        Bob
        <a href="/humans/2/edit">Edit</a>
    </li>
<ul>

Extra info

One thing I forgot in the lecture was that when you use the #each helper to iterate over primitive values (strings, numbers, booleans, etc.), you can use this to reference the value you are iterating over.

Context:

{
    names: [
        "Alice",
        "Bob"
    ]
}

Template:

<ul>
    {{#each names}}
        <li>{{this}}</li>
    {{/each}}
<ul>

Generated HTML code:

<ul>
    <li>Alice</li>
    <li>Bob</li>
<ul>

Lecture material