each

The each directive is used to reactively render elements based on iterables, like arrays. Similar to when, the component template being evaluated once means, that adding or removing elements after the initialization would not lead to the DOM changing.

Type: each<T>(value: T[] | ReadonlyGrain<T[]>): { as: ( run: (elem: T, index: number) => NodeList) => Directive<Text> & {else: (nodes: NodeList) => Directive<Text>}}

INFO

each is a pure Text directive.

Using each

To use each, include inside a template and pass a value (reactive or static). Use the returned as property to define the iterative template used. Optionally, use the else property to define a callback template to use when there are no element in the passed array.

WARNING

While Nørd usually handles NodeLists with multiple elements by default, the forEach directive needs to always return a NodeList of length 1, to ensure that the replacement of Nodes works correctly.

import { grain, each, createComponent } from '@grainular/nord';

const component = createComponent((html) => {
    const characters = grain(['a', 'b', 'c']);

    return html`<div>
        ${each(characters).as((char, index) => html`<div key="${index}">Characters: ${char}</div>`)}
    </div>`;
});

This will return a HTMLDivElement for each character in the Grain. Whenever the Grain updates, the function provided to as function will be evaluated again, and the result compared to the current DOM tree. Nodes will then be replaced accordingly.

The key Attribute

To track changes of the Elements, especially when inserting not in the start or end of the iterable, the key attribute can be used to give each element a unique id to compare to when updating.

⚡️

Code insights: You can see the function signature & implementation here: each.ts