Få Referenser från HTML Byggd med Mall för Litteraler

0
14

En sak JavaScript mall litteraler är bra på är litet block av HTML. Som:

// Troligen från vissa API eller vad
const data = {
titel: “Titel”,
innehåll: “Innehåll”
};

const some_html = `
<div class=”modul”>
<h2>${data.titel}</h2>
<p>${data.innehållet}</p>
</div>
`;

Men det är fortfarande bara en sträng. Det är inte redo för att lägga till i DOM ännu. Och vad händer om vi behöver hänvisningar till de delar inuti på något sätt?

Vi har skrivit om ett par bibliotek som är i denna anda: lit-html-och hyperHTML. De är ganska små-libs, men är också sorta mer om re-rendering av mallar på ett effektivt sätt (som super mini Reagera).

Vad händer om du bara behöver noder? Det är nästan en one-liner:

const getNodes = str => {
avkastning ny DOMParser().parseFromString(str, “text/html”).organ.childNodes;
}

Nu kan vi släppa den mallen bokstavlig av HTML-koden direkt i DOM:

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

Här är det:

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

Men hur ska vi få våra händer på enskilda bitar i att HTML? Vi vet inte exakt har referenser till allt, även en hel del som vi lägger in.

Jag såg bara den här lilla lib kallas Facon som ser ut att göra just detta. Det gör att användning av märkta mall för litteraler, vilket är super cool:

import f från “facon’;

const data = {
titel: “Titel”,
innehåll: “Innehåll”
};

låt html = f`
<div class=”modul”>
<h2>${data.titel}</h2>
<p>${data.innehållet}</p>
</div>
`;

dokumentet.organ.appendChild(html);

Här hoppar de behöver för vår lilla getNodes funktion, men ännu viktigare, vi kan ryck ut dessa referenser!

låt html = f`
<div class=”modul”>
<h2 ref=”title”>${data.titel}</h2>
<s ref=”content”>${data.innehållet}</p>
</div>
`;

låt { titeln, innehållet } = html.samla();
titel.innerText = “Titeln har Ändrats!”;

Här är det:

Se Pennan Facon Mall av Chris Coyier (@chriscoyier) på CodePen.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men den sociala dela länkar ovan, säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sättande till sociala nätverk, och mycket mer!