repeat
An HTML content command that iterates through all items of a Collection and produces a copy of its host element for every item beyond the first.
The value of its primary attribute should resolve into the Collection to iterate through. For every item in the Collection, aside from the first, a copy of the host element is produced (for the first item, the host element itself is used). This copy is placed into the document after the host element or the previous copy. Any logic attributes or elements on the copy or within its contents are then evaluated with the current item in the variable context behind the key defined with the repeat-var
secondary attribute.
This content command produces a local variable context for the commands evaluated within the iteration rounds. This local context's primary feature is that it contains one of the Collection's items for the other commands to access. A new context is created at the start of every round of the iteration process, and then terminated at the end of the round.
This command has a priority of 100.
Secondary attributes
repeat-var | ||
---|---|---|
Required | Value type | EL-evaluated |
Yes | String | Yes |
The resolved value of this attribute defines the name of the local context variable that holds the current item of the loop. |
repeat-round-start | ||
---|---|---|
Required | Value type | EL-evaluated |
No | Boolean | Yes |
This attribute can be used to define a condition for skipping certain iteration rounds. This attribute's expression is evaluated at the start of every round and if it doesn't resolve into If undefined, no iteration rounds are skipped. |
repeat-var-status | ||
---|---|---|
Required | Value type | EL-evaluated |
No | String | No |
Defines the name of the variable that holds a Loop Status value. Loop Status has the properties Property |
Examples
Use repeat
to present a Collection's data on a HTML template or Form. Take care to not repeat content that has things within it that should be unique, such as a table's thead
element.
<div dyn-repeat="items" repeat-var="item"><p dyn-content="item.text"/></div>
To create dynamic tables in HTML, place repeat
on the table's content row. Additionally, this example table excludes items of its Collection missing the "description" property using the repeat-round-start
secondary attribute:
<table><tr dyn-repeat="items" dyn-repeat-var="item" dyn-repeat-round-start="item.description == null"><td><p dyn-content="item.name"/></td><td><p dyn-content="item.description"/></td></tr></table>
Should you have a need of repeating more than one table row, place repeat
on a tbody
element in which the rows are:
<table><tbody dyn-repeat="items" dyn-repeat-var="item"><tr><td><p dyn-content="item.name"></td><td><p dyn-content="item.type"></td></tr><tr><td colspan="2"><p dyn-content="item.description"></td></tr></tbody></table>