repeat
Repeats the element it is on once per item of an array. It does the same job as <repeat-list> without a wrapper, so it works where the HTML parser only allows certain children: <ul>, <ol>, <table>, <tbody>, <tr>, <select>, <datalist>. Used in component markup.
<li repeat="#ref" [as="item"] [index="i"] [key="id"]>…</li>Attributes
| Attribute | Type | Default | Meaning |
|---|---|---|---|
repeat |
reference to an array | required | The list. Anything that is not an array renders nothing |
as |
name | item |
Variable name for the current item |
index |
name | none | Variable name for the current position |
key |
property name | position | Property that identifies each item between updates |
The four attributes are removed from the copies. Everything else on the element, including _ bindings and on… handlers, is applied to each copy with the loop variables in scope. Keys work as described on <repeat-list>.
The original element is replaced by an empty comment that marks where the copies go.
Example
| # | Name | Score |
|---|---|---|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>repeat demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="./score-table.html"></import-element>
<score-table></score-table>
</body>
</html><custom-element name="score-table">
<script>
const board = useState({
rows: [
{ id: "a", name: "Ana", score: 12 },
{ id: "b", name: "Ben", score: 9 },
{ id: "c", name: "Chi", score: 15 },
],
});
function sort() {
board.rows.sort((a, b) => b.score - a.score);
}
</script>
<style>
:host {
display: grid;
gap: calc(var(--spacing) * 2);
justify-items: start;
}
td,
th {
padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
text-align: left;
}
</style>
<table>
<thead><tr><th>#</th><th>Name</th><th>Score</th></tr></thead>
<tbody>
<tr repeat="#board.rows" as="row" index="i" key="id">
<td><slot name="#i"></slot></td>
<td><slot name="#row.name"></slot></td>
<td><slot name="#row.score"></slot></td>
</tr>
</tbody>
</table>
<ui-button variant="outline" onclick="sort()">Sort by score</ui-button>
</custom-element>