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>
^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:
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
: anyShortcuts 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
: anyThe most common 'use case' for an editable list, in its quickest fashion.
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"}
]
}]
}]
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"
}]
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.