List of Helpers - Collections / Lists

  • arrayify
  • after 
  • any 
  • before 
  • each
  • empty 
  • first  
  • inArray 
  • join 
  • last 
  • length 
  • lengthEqual 
  • sort 
  • withAfter 
  • withBefore 
  • withFirst 
  • withGroup 
  • withLast 
  • withSort

{{arrayify}}

Returns all of the items in the collection after the specified count. 
Parameters: count int - How many items to omit from the beginning. (Required)

Data:

"value": [ 123 Street, Plaza Area, London, W1]

Template:

{{#each (arrayify this ":")}} 
{{this}} {{/each}}

Renders to:

123 Street,

Plaza Area, 
London
W1

{{ 

{{after}}

Returns all of the items in the collection after the specified count. 
Parameters: count int - How many items to omit from the beginning. (Required)

Data:

"collection": [
  "Amy Wong",
  "Bender",
  "Dr. Zoidberg",
  "Fry",
  "Hermes Conrad",
  "Leela",
  "Professor Farnsworth",
  "Scruffy"
]

Template:

{{after collection 5}}

Renders to:

Leela, Professor Farnsworth, Scruffy

{{ {{any}}

Conditionally render a block if the collection isn't empty. Opposite of empty Parameters: none

Data:

"collection": ["Professor Farnswor"]

Templates:

{{#any collection}}
  Good news everyone!
{{else}}
  Bad news everyone!
{{/any}}

Renders to:

Good news everyone!

{{ {{before}}

Returns all of the items in the collection before the specified count. Opposite of after. 
Parameters: count int - How many items to omit from the end. (Required)

Small tip: use negative parameter to return first n elements of array Data:

"collection": [
  "Amy Wong",
  "Bender",
  "Dr. Zoidberg",
  "Fry",
  "Hermes Conrad",
  "Leela",
  "Professor Farnsworth",
  "Scruffy"
]

Template:

{{before collection 5}}

Renders to:

Amy Wong, Bender, Dr. Zoidberg

{{ {{each}}

Use {{#each collection as |value key| }} or @index / @key in each 
Current implementation of the default Handlebars loop helper {{#each}} adding index (0-based index) to the loop context. 
Parameters: none


Data:

"collection": ["Professor Farnsworth", "Fry", "Bend"]


Template: 

{{#each collection}}
  {{this}} is {{index}}
{{/each}}

 

Renders to:

Professor Farnsworth is 0, Fry is 1, Bender is 2

 { {{empty}}

Conditionally render a block if the collection is empty. 
Parameters: none

Data:

 "collection": []

Template:

 {{#empty collection}}
     Good news everyone!
 {{else}}
     Bad news everyone!
 {{/empty}}

Renders to:

 Good news everyone!

 {{{{first}}

Returns the first item in a collection. 
Parameters: none

Data:

 "collection": [
   "Amy Wong",
   "Bender",
   "Dr. Zoidberg",
   "Fry",
   "Hermes Conrad",
   "Leela",
   "Professor Farnsworth",
   "Scruffy"
 ]

Template:

 {{first collection}}

Renders to:

 Amy Wong

{{ {{inArray}}

Conditionally render a block if a specified value is in the collection. 
Parameters: value string|int - A value to test against. (Required)

Data:

 "collection": ["Professor Farnsworth", "Fry", "Bend"]

Template:

 {{#inArray collection "Fry"}}
   I'm walking on sunshine!
 {{else}}
   I'm walking on darkness.
 {{/inArray}}

Renders to:

 I'm walking on sunshine!

{{ {{join}}

Joins all elements of a collection into a string using a separator if specified. Parameters: separatorstring - A string to use as a separator between the items. (Optional)

Data:

  "collection": [
    "Amy Wong",
    "Bender",
    "Dr. Zoidberg",
    "Fry",
    "Hermes Conrad",
    "Leela",
    "Professor Farnsworth",
    "Scruffy"
  ]

Template:

  {{join collection " & "}}

Renders to:

  Amy Wong & Bender & Dr. Zoidberg & Fry & Hermes Conrad & Leela & Professor Farnsworth & Scruffy

  {{{last}}

Returns the last item in a collection. Opposite of first. 
Parameters: none

Data:

  "collection": [
    "Amy Wong",
    "Bender",
    "Dr. Zoidberg",
    "Fry",
    "Hermes Conrad",
    "Leela",
    "Professor Farnsworth",
    "Scruffy"
  ]

Template:

  {{last collection}}

Renders to:

  Scruffy

{{  {{length}}

Returns the length of the collection. 
Parameters: none

Data:

  "collection": [
    "Amy Wong",
    "Bender",
    "Dr. Zoidberg",
    "Fry",
    "Hermes Conrad",
    "Leela",
    "Professor Farnsworth",
    "Scruffy"
  ]

Template:

  {{length collection}}

Renders to:

  8

 {{{{lengthEqual}}

Conditionally render a block based on the length of a collection. 
Parameters: length int - The value to test against. (Required)

Data:

 "collection": [
   {
     "name": "Leela",
     "deliveries": 8021
   },
   {
     "name": "Bender",
     "deliveries": 239
   },
   {
     "name": "Fry",
     "deliveries": -12
   }
 ]

Template:

 {{#lengthEqual collection 3}}
   There are 3 people in Planet Express.
 {{else}}
   This is not Planet Express.
 {{/lengthEqual}}

Renders to:

 There are 3 people in Planet Express.

{{ {{sort}}

Returns the collection sorted. Parameters: none

Data:

 "collection": [
   "Amy Wong",
   "Bender",
   "Dr. Zoidberg",
   "Fry",
   "Hermes Conrad",
   "Leela",
   "Professor Farnsworth",
   "Scruffy"
 ]

Template:

 {{sort collection}}

Renders to:

 Amy Wong, Bender, Dr. Zoidberg, Fry, Hermes Conrad, Leela, Professor Farnsworth, Scruffy

{{ {{withAfter}}

Use all of the items in the collection after the specified count inside a block. 
Parameters: count int - How many items to omit from the beginning. (Required)

Data:

 "collection": [
   "Amy Wong",
   "Bender",
   "Dr. Zoidberg",
   "Fry",
   "Hermes Conrad",
   "Leela",
   "Professor Farnsworth",
   "Scruffy"
 ]

Template:

 {{#withAfter collection 5}}
     {{titleize this}}
 {{/withAfter}}

Renders to:

 Leela Professor Farnsworth Scruffy

{{ {{withBefore}}

Use all of the items in the collection before the specified count inside a block. Opposite ofwithAfter. 
Parameters: count int - How many items to omit from the end. (Required)

Small tip: use negative parameter to return first n elements of array

Data:

 "collection": [
   "Amy Wong",
   "Bender",
   "Dr. Zoidberg",
   "Fry",
   "Hermes Conrad",
   "Leela",
   "Professor Farnsworth",
   "Scruffy"
 ]

Template:

 {{#withBefore collection 5}}
     {{reverse this}}
 {{/withBefore}}

Renders to:

 gnoW ymA redneB grebdioZ .rD

{{ {{withFirst}}

Use the first item in a collection inside a block. 
Parameters: none

Data:

 "collection": [
   "Amy Wong",
   "Bender",
   "Dr. Zoidberg",
   "Fry",
   "Hermes Conrad",
   "Leela",
   "Professor Farnsworth",
   "Scruffy"
 ]

Template:

 {{#withFirst collection}}
   <p>{{this}} is smart.</p>
 {{/withFirst}}

Renders to:

 <p>Amy Wong is smart.</p>

{{ {{withLast}}

Use the last item in a collection inside a block. Opposite of withFirst. 
Parameters: none

Data:

"collection": [
  "Amy Wong",
  "Bender",
  "Dr. Zoidberg",
  "Fry",
  "Hermes Conrad",
  "Leela",
  "Professor Farnsworth",
  "Scruffy"
]

Template:

{{#withLast collection}}
  <p>{{this}} is lazy.</p>
{{/withLast}}

Renders to:

<p>Scruffy is lazy.</p>

{{ {{withSort}}

Uses the sorted collection inside the block. 
Parameters: field string - String name of the field or property to sort by. (Optional)

Data:

"collection": [
  {
    "name": "Leela",
    "deliveries": 8021
  },
  {
    "name": "Bender",
    "deliveries": 239
  },
  {
    "name": "Fry",
    "deliveries": -12
  }
]

Template:

{{#withSort collection "deliveries"}}
  {{name}}: {{deliveries}} <br>
{{/withSort}}

Renders to:

Fry: -12
Bender: 239
Leela: 8021

Also, if you have the sortable variable inside another variable, you can use dot-notation (e.g.{{deliveries.value}}) to sort.

Data:

{
  "collection": [
    {
      "name": "Leela",
      "deliveries": {"value": 8021, "priority": "high"}
    },
    {
      "name": "Bender",
      "deliveries": {"value": 239, "priority": "normal"}
    },
    {
      "name": "Fry",
      "deliveries": {"value": -12, "priority": "low"}
    }
  ]
}

Template:

{{#withSort collection "deliveries.value"}}
  {{name}}: {{deliveries.value}} <br>
{{/withSort}}

Renders to:

Fry: -12
Bender: 239
Leela: 8021