HTML+

#repeat

Related Variables

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

• $item: contains the value of the item of the list
• $key contains the key or index value of the item in the list or dictionary
• $index contains the index of the item in the list

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

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

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">$item.name</div>

Repeat with a specific name for the item.

<nav>
	<a #repeat="navLinks as link" href="{link.path}">{link.label}</a>
</nav>

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