Modèles Markup - Créer, rendre, remplacer et imbriquer des modèles

Modèles

Markup utilise des littéraux de modèle balisés appelés html pour décrire le HTML que vous souhaitez restituer.

javascript
const temp = html`<h1>Hello World</h1>`

Le html renvoie une instance HTMLTemplate contenant des méthodes et des propriétés que vous pouvez utiliser pour accéder à de nombreuses actions ou effectuer de nombreuses actions.

Rendu

Il existe plusieurs façons d'afficher un modèle après l'avoir défini :

render : prend un HTMLElement auquel ajouter le modèle ;
replace : prend n'importe quel nœud ou une autre instance de HTMLTemplate à remplacer dans le DOM ;
insertAfter : prend n'importe quel nœud ou une autre instance de HTMLTemplate pour insérer le modèle après ;

render

La méthode render utilisera soit un ShadowRoot, un HTMLElement ou un DocumentFragment auquel ajouter le contenu.

javascript
temp.render(document.body)

L'analyse du modèle a lieu au moment du rendu et n'aura lieu qu'une seule fois. Cela est également vrai pour les autres méthodes de rendu.

L’appel répété de la méthode render avec la même cible ne fonctionnera qu’une seule fois. Vous pouvez l'appeler avec une cible différente pour déplacer le contenu vers un autre endroit.

javascript
temp.render(document.body) // will parse and append to document.body
temp.render(document.body) // will be ignored
temp.render(document.body) // will be ignored
temp.render(document.getElementById('app')) // will move content to #app

replace

La méthode replace prend n'importe quel HTMLTemplate ou Nœud tant qu'il ne s'agit pas d'un ShadowRoot, HTMLBodyElement, HTMLHeadElement ou HTMLHtmlElement à remplacer dans le DOM.

javascript
temp.replace(document.getElementById('app'))

Semblable à la méthode render, elle n’analysera le contenu qu’une seule fois.

javascript
const loading = html`<p>loading...</p>`

html`${loading}`.render(document.body)

doSomethingAsync().then(() => {
    const done = html`<p>Done</p>`

    done.replace(loading)
})

La méthode replace est puissante, en particulier lorsque vous travaillez avec un rendu asynchrone. Vous pouvez restituer temporairement quelque chose comme un indicateur de chargement, puis le remplacer plus tard une fois que vous avez vos données. C'est exactement ce que fait l'utilitaire suspense.

insertAfter

La méthode insertAfter fonctionne exactement comme la méthode render. La seule différence est qu'il ajoute le contenu du modèle après le nœud cible fourni.

javascript
temp.insertAfter(document.getElementById('app'))

Une autre différence est qu'il peut également prendre une instance HTMLTemplate comme cible, permettant ainsi de restituer les modèles les uns après les autres.

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

html`<ul>
    ${items}
</ul>`.render(document.body)

html`<li>Read a book</li>`.insertAfter(items[1])

parentNode

La propriété parentNode vous indiquera où le modèle a été rendu. Il renverra l'élément dans lequel les nœuds du modèle ont été ajoutés.

mounted

Après avoir rendu votre modèle, vous pouvez utiliser la propriété mounted pour vérifier si votre modèle a été ajouté à la cible comme vous le souhaitiez.

La propriété mounted ne vous dira pas si le modèle est réellement joint à un document. Pour cela, vous pouvez utiliser le parentNode?.isConnected.

javascript
const temp1 = html`one`.render(document.createDocumentFragment())
const temp2 = html`two`.render(document.body)

console.log(
    temp1.mounted, // true
    temp1.parentNode?.isConnected // false
)

console.log(
    temp2.mounted, // true
    temp2.parentNode?.isConnected // true
)

childNodes

Le childNodes vous donnera un tableau de nœuds de niveau supérieur rendus par le modèle.

javascript
const temp = html`
    Loose text
    <p>a paragraph</p>
    <button>click me</button>
    ending
`.render(document.body)

console.log(temp.childNodes) // [text, p, text, button, text]

unmount

Pour supprimer votre modèle de la cible, vous pouvez utiliser la méthode unmount.

temp.unmount()

Le unmount devrait être le SEUL moyen de supprimer le modèle du DOM. En effet, il se désabonne également de tout état de manière récursive. Cela signifie que même lorsque vous imbriquez des modèles, le unmount sera appelé pour chacun d'entre eux.

La manipulation directe du DOM peut avoir des résultats indésirables.

toString

Idéalement, vous pouvez obtenir une représentation sous forme de chaîne de votre modèle dans son état de rendu actuel.

javascript
const temp = html`
    Loose text
    <p>a paragraph</p>
    <button>click me</button>
    ending
`.render(document.body)

console.log(temp.toString())
/* 
Loose text
<p>a paragraph</p>
<button> click me</button>
ending
 */

Cycles de vie

Il existe des méthodes supplémentaires disponibles à des fins de cycle de vie. Vous pouvez en savoir plus en consultant le document lifecycle.

modifier ce document