#each : Iteration Helper

Iterate over arrays or collections, rendering the enclosed template for each item. The data context changes to the current item within the block.

Syntax

{{#each collection}}
  <!-- Content repeated for each item -->
{{/each}}

Parameters

Special Variables

Examples

Basic Iteration

<ul>
{{#each model.items}}
  <li>{{this}}</li>
{{/each}}
</ul>

Data:

doc.Params["model"] = new {
    items = new[] { "Apple", "Banana", "Orange" }
};

Output:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

With Object Properties

<table>
  {{#each model.products}}
  <tr>
    <td>{{add(@index, 1)}}</td>
    <td>{{this.name}}</td>
    <td>${{format(this.price, '0.00')}}</td>
  </tr>
  {{/each}}
</table>

Data:

doc.Params["model"] = new {
    products = new[] {
        new { name = "Widget", price = 19.99m },
        new { name = "Gadget", price = 29.99m }
    }
};

Using Special Variables

{{#each model.items}}
  <div class="{{if(@first, 'first', '')}} {{if(@last, 'last', '')}}">
    <span>Item {{add(@index, 1)}}</span>
    <h3>{{this.title}}</h3>
  </div>
{{/each}}

Accessing Parent Context

<h1>{{model.companyName}}</h1>
{{#each model.departments}}
  <h2>{{this.name}}</h2>
  {{#each this.employees}}
    <li>{{this.name}} works at {{../../companyName}}</li>
  {{/each}}
{{/each}}

Underlying Implementation

The {{#each}} helper compiles to the following Scryber template element:

<template data-bind="{{collection}}">
  <!-- Your content here with {{this}} context -->
</template>

This uses Scryber’s ForEach component internally, which provides the iteration and context management.

Notes

• Empty arrays render nothing (no error)
• Works with any IEnumerable collection
• Can be nested for multi-dimensional data
• Context changes to current item within the block
• Use {{.}} to reference the entire current item
• Provides @index, @first, and @last special variables

See Also

• #with Helper
• #if Helper
• Template Iteration Guide