<pacem-repeater> turns an array into markup: its <template> gets stamped once per item, and stays in sync as the array changes. Lists, tables, menus, chips: anything that comes in rows.

<pacem-repeater datasource="{{ #playlist.model }}">
    <ol>
        <template>
            <li><pacem-text text="{{ ^item.title }}"></pacem-text></li>
        </template>
    </ol>
</pacem-repeater>

Usage

One template, many items. The repeater stamps its <template> once per datasource item, right where the template sits: whatever surrounds it (an <ol>, a table header) renders once. Inside, ^item is the current item and ^index its position.

Nest them. Every level adds a ^: in an inner repeater, ^^item and ^^index reach the outer one.

<pacem-text text="{{ (^^index + 1) + '.' + (^index + 1) + ' ' + ^item.name }}"></pacem-text>

Change the array. Assign a new array (concat, filter, map, a sorted slice()), or mutate the bound one in place: push, splice & co. notify when the array is the watched property (e.g. #list.model).

Items are reused by position: on a new datasource, the first rows get re-bound to the new items, and only the difference gets created or removed. Cheap, but row state (a focused field, an open panel) stays with the position, not with the item.

Act on a row. An element inside an item can dispatch a command: a <pacem-button> with a command-name (say delete) and a command-argument (say {{ ^index }}). The repeater re-fires it as itemcommand, then as itemdelete, whose detail is the argument.

<pacem-repeater datasource="{{ #todos.model }}"
                on-itemdelete="#todos.model = #todos.model.filter((_, i) => i !== $event.detail)">

Swap the template. A <pacem-template-proxy> can stand where the <template> goes, pointing (target) to a template elsewhere: change its target and the items re-render with the new one. It also allows recursion (tree views).

Examples

A to-do list

Each row's buttons dispatch commands (toggle, delete) with their index: the repeater turns them into itemtoggle and itemdelete.

A restaurant menu

Courses, then their dishes: an inner repeater per course, numbering dishes with both indexes (^^index, ^index).