Réf

Les modèles Markup géreront le rendu de tous les éléments DOM pour vous, mais si vous avez vraiment besoin d'accéder à l'élément rendu par les modèles, vous pouvez utiliser l'attribut ref pour fournir une clé de poignée que vous pourrez ensuite utiliser pour récupérer les éléments.

html`<button ref="btn">click me</button>`

Plusieurs références

L'attribut ref renvoie toujours un tableau. Par conséquent, vous pouvez utiliser la même clé pour récupérer plusieurs éléments à la fois.

const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

Les références ne sont pas créées tant que le modèle n'est pas rendu. En effet, la création d'un modèle enregistre simplement un modèle et c'est pendant la phase de rendu que les éléments sont collectés.

Accéder aux références

Pour accéder à ces éléments de référence, vous pouvez lire la propriété refs dans l'instance du modèle.

const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

console.log(
    temp.refs['item'] // (3) [li, li, li]
)

La propriété refs renvoie un littéral d'objet avec un tableau d'éléments dont la clé correspond à la valeur que vous avez fournie dans les attributs ref.

Références imbriquées

Vous pouvez accéder à n'importe quelle référence via l'instance de modèle, y compris ses modèles enfants.

const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

Cette fonctionnalité vous permet de vous concentrer sur votre modèle principal et de tout travailler à partir de là. Cela ne signifie pas que vous ne pouvez pas accéder aux références à chaque niveau de modèle individuel. C'est juste plus pratique.

items[0].refs['item'] // [li]
temp.refs['list'] // [ul]
temp.refs['item'] // [li, li, li]

Références dynamiques

Toutes les références sont dynamiques, ce qui signifie qu'au fur et à mesure que les éléments sont rendus ou démontés du modèle, des références sont ajoutées ou supprimées.

const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

items[0].unmount()
items[2].unmount()

console.log(
    temp.refs // {item: Array(1), list: Array(1)}
)

Pour cette raison, vous devez toujours vérifier la présence de la référence avant de faire quoi que ce soit. Ce serait l'indication si l'élément est toujours rendu dans le modèle ou non.