by Before Semicolon


repeat attribute details
name repeat
type attribute
value executed; number, list-like or map-like object.
related attributes none
related variables $item, $key, $index
description An attribute that takes a number, a list or map-like object to repeat the tag it was placed on.

The #repeat attribute creates three variables for you as context for the markup you are repeating. These are:

The "as" keyword

By default, all item value is available under the $item variable but you can also override it by specifying the as value

Usage Examples

Repeat a specific number of times

	<li #repeat="3" class="list-item-{$index}">Item {$item}</li>

Repeat based on some list or map-like objects.

<div #repeat="[2, 4, 6]">{$index}-{$item}</div>
<div #repeat="new Set([2, 4, 6])">{$item}</div>
<div #repeat="new Map([[a,2], [b,4], [c,6]])">{$key}-{$item}</div>
<div #repeat="{a: 2, b: 4, c: 6}">{$key}-{$item}</div>
<div #repeat="$data.list">$</div>

Repeat with a specific name for the item.

	<a #repeat="navLinks as link" href="{link.path}">{link.label}</a>
	<li #repeat="3 as n" class="list-item-{$index}">Item {n}</li>