hyperHTML: le contenu générique dans une boucle est toujours rendu plein et perd ses liaisons (cliquez sur les événements)

Question

J'ai quelques problèmes en utilisant hyperHTML (peut-être seulement quelques compréhensions-problèmes).

Lorsque j'ai du contenu dynamique dans une boucle, le contenu est entièrement rendu et perd ses liaisons (comme document.body.innerHTML = content, ce qui n'est pas l'idée de hyperHTML, n'est-ce pas?). S'il vous plaît voir mon exemple ci-dessous:

function render() { 
 
    console.log('render'); 
 
    
 
    hyperHTML.bind(document.body) `start:<br> 
 
    ${[1,2,3].map(item => ` 
 
     count <button id="testbutton${item}">button${item}</button><br> 
 
    `)}<br> 
 
    press button2<br> 
 
    <button id="testbutton">Test Button</button><br> 
 
    last rendering ${new Date().toTimeString()}`; 
 
} 
 

 
function init() { 
 
    render(); 
 
    let self = this; 
 
    document.querySelector('#testbutton2').addEventListener('click',() => self.render()); 
 
    document.querySelector('#testbutton').addEventListener('click',() => self.render()); 
 
} 
 
window.addEventListener('load',() => init());

<script src="https://webreflection.github.io/hyperHTML/min.js"></script>

La première fois button2 est cliqué sur le contenu est rendu. La liaison initiale fonctionne toujours. Une fois le contenu rendu à nouveau, l'écouteur est perdu.

De l'autre côté, le Test Button n'est pas rendu à nouveau. La liaison est toujours présente. Est-ce que quelqu'un pourrait m'expliquer comment utiliser correctement hypeHTML en itérant sur une liste?

Merci, Matthias

Answer 1

Dans hyperHTML il existe essentiellement deux utilitaires: lient, ce qui rend le contenu à l'intérieur d'un noeud, et fil, qui créent le contenu à la place.

La méthode du fil vous donne la possibilité de relier son contenu à un objet spécifique, ce qui est le bit manquant de votre extrait.

Vous renvoyez simplement un tableau de chaînes, et un tableau comme valeur d'interpolation, as described in the documentation, est un opt-in explicite pour html mais il s'agit juste de gérer des chaînes, pas un noeud DOM. Vous utilisez également cette chaîne comme des littéraux de gabarit normaux, et non pas comme du contenu hyperHTML, car vous utilisez des interpolations dans la nature, comme les attributs internes, ce qui n'est pas autorisé dans hyperHTML (lisez les attributs partiels dans la documentation).

Pour résoudre tous ces problèmes à la fois, il vous suffit de câbler soit le même élément, s'il s'agit d'un objet, soit une référence qui ne changera pas, comme le conteneur hyperHTML lui-même.

Puisque vous voulez relier le contenu interne plusieurs fois, tout ce que vous devez faire est d'utiliser un :id de sorte que par N éléments, vous aurez N relations faibles.

J'ai created a Code Pen example qui montre tout cela à travers très peu de changements à votre code original.