PacemRepeaterElement is the element that allows to iterate through arrays, contextualizing data into portions of DOM.
All it needs is a <template> descendant that represents the item DOM. For instance:

<pacem-repeater datasource="{{ ['apples', 'apricots', 'raspberries'] }}">
    <ul>
        <li>Fruit:</li>
        <template>
            <li><pacem-text text="{{ ^item }}"><pacem-text></li>
        </template>
    </ul>
</pacem-repeater>

Bindings

^item and ^index are the accessors respectively to the data-item and to the item-index.
Iterations can be nested and multi-level. In order to access upper-level items just prefix ^item and ^index with the proper number of ^.

See example below:

Item Commands

Items in a repeater can bubble item-relevant command events. The command name can be generic a generic:

Intercepting the item-command is as simple as writing the handler attiibute on-...

<pacem-repeater on-itemcommand="dosomethingWith($event.detail)">
    <template>
        <pacem-button command-name="foo" command-argument="{{ ^item }}">foo</pacem-button>
...

The custom event detail property carries the following payload:

• commandName: string,
• commandArgument: any

Shortcuts for standard item-commands like select, edit and delete are also provided.

<pacem-repeater on-itemselect="selectAt($event.detail)" on-itemdelete="delete($event.detail)">
    <template>
        <pacem-button command-name="select" command-argument="{{ ^index }}">select</pacem-button>
        <pacem-button command-name="delete" command-argument="{{ ^item }}">delete</pacem-button>
...

In this case, the custom event detail property carries only:

• commandArgument: any

The most common 'use case' for an editable list, in its quickest fashion.

Tree View

Template proxying: a special custom element (<pacem-template-proxy>) might be allowed in place of a standard <template>.
The PacemTemplateProxyElement webcomponent allows to reference an external template, which can be used as the repeater's item template. This enables recursive loop scenarios.

[{
"name": "root", "children": [{ "name": "branch1", "children": [ { "name": "leaf1"}, { "name": "leaf2"}, { "name": "leaf3"} ] },{ "name": "branch2", "children": [ { "name": "leaf4"}, { "name": "leaf5"} ] }] }]

Dynamic Template

Item templates can also be dynamically injected into the repeater: the target property of PacemTemplateProxyElement reacts to changes and notifies the repeater about them.

Template changes might necessitate massive repaint effort from the browser.

[{
"name": "Peter Parker", "hero": "Spiderman" },{
"name": "Bruce Wayne", "hero": "Batman" },{
"name": "Clark Kent", "hero": "Superman" },{
"name": "Tony Stark", "hero": "Ironman" }]