Working with Lists

Generally when working with elements based off of lists you would loop over the elements in a list and decide your output.

Two in-built Helpers

There are two built in helpers for working with lists in Handlebars. The "list" Helper and the "selected" Helper.

List Helper

It allows you to loop over every item in a list. You have access to helpful variables that let you know whether the list item was selected by the user, whether there's a sublist, whether the list item is first or last, and many more. Check the docs for full information.

It's used like:

{{#each (list element="List Content Element")}}
  {{#if @first}}
    <ul>
  {{/if}}

  <li>{{#if selected}}<strong>{{/if}}{{name}}{{#if selected}}</strong>{{/if}}</li>

  {{#if @last}}
    </ul>
  {{/if}}
 
{{/each}}

The above code will loop over the whole list and make the selected items bold.

  • Advanced Diploma
  • Associate
  • Online Course
  • Postgraduate
  • Short Course
  • Undergraduate
  • Vocational Education

Selected Helper

The selected helper works in a very similar way but instead of looping over the whole list, it just loops over the selected items in the list.

It's used like:

{{#each (selected element="List Content Element")}}
  {{#if @first}}
    <ul>
  {{/if}}

  <li>{{name}}</li>

  {{#if @last}}
    </ul>
  {{/if}}
 
{{/each}}

The above code will loop over the selected items in a list and make s HTML list from the selected values.

  • Online Course
  • Postgraduate