Referenzen aus mit Template Literalen erstelltem HTML abrufen

Eine Sache, für die JavaScript- Template Literals großartig sind, sind kleine HTML-Blöcke. So wie:

// Probably from some API or whatever
const data = {
  title: "Title",
  content: "Content"
};

const some_html = `
  <div class="module">
    <h2>${data.title}</h2>
    <p>${data.content}</p>
  </div>
`;

Aber das ist immer noch nur ein String. Er ist noch nicht bereit, dem DOM hinzugefügt zu werden. Und was, wenn wir irgendwie Referenzen auf diese Elemente benötigen?

Wir haben über ein paar Bibliotheken geschrieben, die in diese Richtung gehen: lit-html und hyperHTML. Das sind ziemlich kleine Bibliotheken, die sich aber eher mit der effizienten *Neu*-Rendering von Templates beschäftigen (wie ein Super-Mini-React).

Was ist, wenn Sie nur die Knoten brauchen? Das ist fast eine Einzeiler-Funktion

const getNodes = str => { 
  return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}

Jetzt könnten wir dieses Template-Literal mit HTML direkt in das DOM einfügen

document.body.appendChild(getNodes(some_html)[0]);

Hier ist das

Siehe den Pen pQyZOz von Chris Coyier (@chriscoyier) auf CodePen.

Aber wie bekommen wir einzelne Teile dieses HTMLs in die Finger? Wir haben keine Referenzen auf irgendetwas, nicht einmal auf den gesamten Block, den wir eingefügt haben.

Ich habe gerade diese kleine Bibliothek namens Facon entdeckt, die genau das zu tun scheint. Sie nutzt Tagged Template Literals, was super cool ist.

import f from 'facon';

const data = {
  title: "Title",
  content: "Content"
};

let html = f`
  <div class="module">
    <h2>${data.title}</h2>
    <p>${data.content}</p>
  </div>
`;

document.body.appendChild(html);

Dies erspart unsere kleine getNodes-Funktion, aber noch wichtiger ist, dass wir diese Referenzen extrahieren können!

let html = f`
  <div class="module">
    <h2 ref="title">${data.title}</h2>
    <p ref="content">${data.content}</p>
  </div>
`;

let { title, content } = html.collect();
title.innerText = "Title Changed!";

Hier ist das

Siehe den Pen Facon Template von Chris Coyier (@chriscoyier) auf CodePen.