Holen Sie Referenzen von HTML-erstellt mit Vorlage Literale

0
9

Eine Sache, JavaScript-template-Literale sind sehr wenig HTML-Codeblöcke. Wie:

// Wahrscheinlich von einigen API oder was auch immer
const data = {
Titel: “Titel”,
Inhalt: “Inhalt”
};

const some_html = `
<div class=”module”>
<h2>${data.Titel}</h2>
<p>${data.Inhalt}</p>
</div>
`;

Aber das ist nur noch ein string. Es ist nicht bereit, zum Anhängen an den DOM nur noch. Und was ist, wenn wir müssen die Referenzen auf die Elemente im inneren irgendwie?

Wir haben geschrieben über ein paar Bibliotheken, die in dieser Vene: lit-html-und hyperHTML. Diese sind ziemlich klein libs, aber auch sorta mehr über re-rendering der templates auf effiziente Art und Weise (wie super-mini-Reagieren).

Was, wenn man nur die Knoten? Das ist schon fast eine one-liner:

const getNodes = str => {
return new DOMParser().parseFromString(str, ‘text/html’).Körper.childNodes;
}

Jetzt könnten wir drop, die Vorlage literal HTML-rechts in den DOM:

Dokument.Körper.appendChild(getNodes(some_html)[0]);

Hier ist, dass:

Finden Sie den Stift pQyZOz von Chris Coyier (@chriscoyier) auf CodePen.

Aber wie bekommen wir unsere Hände auf einzelnen bits, die HTML? Wir nicht genau Verweise auf alles, sogar das ganze Stück wir.

Ich sah nur diese kleine lib genannt Facon, das aussieht, genau dies zu tun. Es macht den Einsatz von tagged Vorlage Literale, die ist super cool:

import von f ‘facon’;

const data = {
Titel: “Titel”,
Inhalt: “Inhalt”
};

lassen Sie html = f`
<div class=”module”>
<h2>${data.Titel}</h2>
<p>${data.Inhalt}</p>
</div>
`;

Dokument.Körper.appendChild(html);

Dies überspringt die Notwendigkeit für unsere kleinen getNodes Funktion, aber noch wichtiger ist, wir können reißen aus diesen verweisen!

lassen Sie html = f`
<div class=”module”>
<h2 ref=”title”>${data.Titel}</h2>
<p ref=”content”>${data.Inhalt}</p>
</div>
`;

lassen Sie { Titel Inhalt } = html.collect();
Titel.innerText = “Titel Geändert!”;

Hier ist, dass:

Finden Sie den Stift Facon Vorlage von Chris Coyier (@chriscoyier) auf CodePen.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die social sharing links oben, der Sicherheit und des backups, Markdown-support, site-Suche, das Kommentar-Formular, postulieren soziale Netzwerk-verbindungen und vieles mehr!