Få Referanser fra HTML-Bygget med Mal Verdiane

0
13

En ting JavaScript mal verdiane er gode på er lite blokker av HTML. Som:

// Trolig fra noen API eller hva
const data = {
tittel: “Tittel”,
innhold: “Innhold”
};

const some_html = `
<div class=”modul”>
<h2>${data.tittel}</h2>
<p>${data.innhold}</p>
</div>
`;

Men det er fortsatt bare en streng. Det er ikke klar til å legge til DOM ennå. Og hva hvis vi trenger referanser til de elementer inni liksom?

Vi har skrevet om et par av bibliotekene som er med i denne genren: tent, html og hyperHTML. De er ganske små biblioteker, men er også sorta mer om re-gjengivelse av maler på en effektiv måte (som super mini Reagere).

Hva om du bare trenger noder? Det er nesten en one-liner:

const getNodes = str => {
tilbake nye DOMParser().parseFromString(str ‘text/html’).kroppen.childNodes;
}

Nå kunne vi slippe at malen bokstavelig av HTML og rett inn i den DOM:

dokumentet.kroppen.appendChild(getNodes(some_html)[0]);

Her er den:

Se Penn pQyZOz av Chris Coyier (@chriscoyier) på CodePen.

Men hvordan får vi våre hender på de enkelte biter av at HTML? Vi vet ikke akkurat har referanser til noe som helst, selv den hel del som vi satt i.

Jeg så denne lille lib kalt Facon som ser ut til å gjøre nettopp dette. Det gjør bruk av merket mal verdiane, som er super kul:

import f fra ‘facon’;

const data = {
tittel: “Tittel”,
innhold: “Innhold”
};

la html = f”
<div class=”modul”>
<h2>${data.tittel}</h2>
<p>${data.innhold}</p>
</div>
`;

dokumentet.kroppen.appendChild(html);

Dette hopper behovet for vår lille getNodes funksjon, men enda viktigere, vi kan huke tak i de referanser!

la html = f”
<div class=”modul”>
<h2 ref=”title”>${data.tittel}</h2>
<p ref=”innhold”>${data.innhold}</p>
</div>
`;

la { tittel, innhold } = html.samle inn();
tittel.innerText = “Tittelen er Endret!”;

Her er den:

Se Penn Facon Mal av Chris Coyier (@chriscoyier) på CodePen.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men den sosiale deling av koblinger ovenfor, sikkerhet og backup, Markdown-støtte, søk nettstedet, kommentar skjemaet, positing til sosiale nettverk-tilkoblinger, og mer!