repeat

The repeat directive will repeat the DOM element based on a list-like object values or a specific number.

Repeat based on a number

You can specify how many times you want the element to be repeated by simply providing a number.

Below example will repeat the div.list-item 10 times.

class FlatList extends WebComponent {
	get template() {
		return `
			<div class="list-item" repeat="10">item</div>
		`
	}
}

Repeat based on data

You can also provide iterable objects or object literal as value, and it will repeat the element based on number of entries in the object.

It supports the following objects:

• Set
• Map
• Array
• String
• Iterable Object created with Symbol.iterator
• Object Literal

The below example will repeat the div.list-item based on the items yield by the iterator.

class FlatList extends WebComponent {
	items = {
		*[Symbol.iterator]() {
			yield 10;
			yield 20;
			yield 30;
		}
	};
	
	get template() {
		return `
			<div class="list-item" repeat="items">item</div>
		`
	}
}

The following will also work just fine.

class FlatList extends WebComponent {
	items = {
		'first': 200,
		'second': 800,
		'third': 400,
	};
	
	get template() {
		return `
		<div class="list-item" repeat="items">item</div>
		`
	}
}

$item

It would make no sense to simply repeat elements without a way to reference the items in the list. For that reason, the repeat directive creates a $item context variable on the element it is set that can be inherited by any descendent nodes.

It is available whether you use a number or list-like objects.

Below example will render 10 div.list-item elements with content being numbers 1 to 10.

class FlatList extends WebComponent {
	get template() {
		return `
			<div class="list-item" repeat="10">{$item}</div>
		`
	}
}

You can also access $item in the element attributes and deep child nodes. Below example will render 3 div.list-item elements with content being 2, 4 and 6.

class FlatList extends WebComponent {
	items = [2, 4, 6];
	
	get template() {
		return `
			<div class="list-item item-{$item}" repeat="items">{$item}</div>
		`
	}
}

$key

Similarly, you can read the key/index for the item you are iterating. When using number, Array and Set as value, the $key will be the index value. For Map and Object literal, the key will be the key of the item.

class FlatList extends WebComponent {
	get template() {
		return `
			<div class="list-item item-{$key}" repeat="10">{$item}</div>
		`
	}
}

class FlatList extends WebComponent {
	items = {
		'first': 200,
		'second': 800,
		'third': 400,
	};
	
	get template() {
		return `
			<div class="list-item {$key}" repeat="items">{key} item: {$item}</div>
		`
	}
}

Repeat As

You don't have to stick to $item and $key as the name for the variable. You may also specify how you want to reference the items and keys of your list which can be convenient when you have nested repeats.

class ContextMenu extends WebComponent {
	static observedAttributes = ['items'];
	
	get template() {
		return `
			<ul repeat="items as $menuItem">
				<li>
					<span>{$menuItem.label}</span>
					<ul repeat="$menuItem.items as $subMenuItem; $key as $id">
						<li>
							<span><b>{$id}</b> {$subMenuItem.label}</span>
						</li>
					</ul>
				</li>
			</ul>
		`
	}
}

Note: You don't have to specify a name starting with dollar sign, but it is conventional with this library to do so in order to distinguish data created in the template vs from the class or context.

Simple follow these patterns:

• [dataOrNumber] as [itemName]
• [dataOrNumber] as [itemName]; $key as [keyName]
• [dataOrNumber]; $key as [keyName]