templaten käyttö JavaScript-renderöinnissä
Yhdistä mallit JavaScript-silmukoihin dynaamisia luetteloita varten
templaten käyttö JavaScript-renderöinnissä on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Template-elementti
<template>-elementti sisältää HTML-koodia, jota ei renderöidä ennen kuin JavaScript kloonaa ja lisää sen dokumenttiin. Sen sisältö on inerttiä — skriptejä ei suoriteta, kuvia ei ladata eikä tyylejä sovelleta — ennen kuin template aktivoidaan.
Template-sisällön käyttäminen
Template-sisältö sijaitsee DocumentFragmentissa osoitteessa template.content. Sisällön käyttämiseksi fragmentti kloonataan: const clone = template.content.cloneNode(true). Argumentti true tekee syvän kloonin, joka sisältää kaikki jälkeläissolmut.
Template-instanssien renderöinti
Kloonia voi mukauttaa ennen sen lisäämistä: kloonista voidaan hakea solmuja, määrittää tekstisisältöä ja lisätä tapahtumankuuntelijoita. Sen jälkeen klooni lisätään DOM:iin: container.appendChild(clone). Jokainen cloneNode()-kutsu luo toisistaan riippumattoman kopion — yhtä kloonia voi muokata vaikuttamatta muihin.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Luetteloiden renderöinti template-elementeistä
Template-elementit voidaan yhdistää Array.forEach- tai Array.map-metodiin luetteloiden renderöimiseksi: jokaiselle data-kokoelman kohteelle kloonataan template, täytetään arvot ja lisätään klooni luettelosäilöön. Tämä malli muistuttaa frameworkien toimintaa, mutta perustuu tavalliseen HTML:ään ja JavaScriptiin.
Template taulukkorivejä varten
Määritellään <template>, joka sisältää soluineen <tr>-elementin. Template kloonataan ja täytetään jokaisen datarivin kohdalla. Näin vältetään merkkijonojen yhdistäminen HTML:n muodostamista varten — erillistä escapointia ei tarvita, koska innerHTML:n sijaan asetetaan textContent.
Templaten aktivointi on eksplisiittistä
Templatet eivät renderöidy automaattisesti. Siksi niitä voidaan käyttää turvallisesti ehdollisesti renderöitävien fragmenttien tallentamiseen: näytetään "no results" -template vain, kun haku ei palauta tuloksia, virhetemplate vain verkkovirheen yhteydessä ja latauksen luuranko datan haun ajaksi.
Sisäkkäiset templatet
Template voi sisältää muita template-elementtejä — sisäkkäiset templatet pysyvät inertteinä ulomman templaten DocumentFragmentissa. Näin voidaan luoda komponenttimaisia hierarkioita, joissa ulompi template kloonataan ja sisäiset templatet aktivoidaan tarvittaessa.
Rajatut tyylit template-elementeissä
Templaten <style>-tagin sisältämät tyylit eivät vaikuta dokumenttiin — ne ovat inerttejä, kunnes template-instanssi luodaan ja sen sisältö siirretään aktiiviseen DOM:iin. Näin templatet voivat sisältää omat tyylinsä saastuttamatta sivua.
Template vs innerHTML
innerHTML:n jäsentäminen on synkronista HTML-merkkijonon käsittelyä — HTML jäsennetään uudelleen joka kerta. template.cloneNode() kopioi jo jäsennetyn puun. Kun sama rakenne renderöidään toistuvasti, templaten kloonaus on nopeampaa ja estää merkkijonojen yhdistämiseen liittyviä XSS-riskejä.
Datan sidonnan rajoitukset
template-elementissä ei ole sisäänrakennettua datan sidontaa — jokaisesta kloonista on haettava ja täytettävä solmut manuaalisesti. Monimutkaisiin datan sidonnan tarpeisiin framework tai kirjasto on sopivampi. Templatet on tarkoitettu yksinkertaisiin, manuaalisiin renderöintimalleihin ilman frameworkin aiheuttamaa lisärasitusta.
Selainyhteensopivuus
template-elementtiä tuetaan kaikissa moderneissa selaimissa (IE11:n tuki oli osittainen). IE-tukea vaativissa ympäristöissä template-sisältö voidaan jäsentää alustuksen yhteydessä polyfillin avulla. Moderneissa projekteissa template-elementtiä käytetään ilman polyfillia.
Tietotesti
Miksi template.content.cloneNode(true) on toistuvassa renderöinnissä suositeltavampi kuin innerHTML?
Yhteenveto
template-elementti sisältää inerttejä, valmiiksi jäsennettyjä HTML-fragmentteja. template.contentin kloonaaminen luo toisistaan riippumattomia instansseja manuaalista datan sidontaa varten. Kun kloonaukseen yhdistetään textContentin määrittäminen (ei XSS:ää), templatet mahdollistavat frameworkien kaltaisen luetteloiden renderöinnin, ehdollisen käyttöliittymän ja uudelleenkäytettävät HTML-mallit pelkillä selainten vakiorajapinnoilla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”templaten käyttö JavaScript-renderöinnissä” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “templaten käyttö JavaScript-renderöinnissä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”templaten käyttö JavaScript-renderöinnissä”?
Yhdistä mallit JavaScript-silmukoihin dynaamisia luetteloita varten Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”templaten käyttö JavaScript-renderöinnissä”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- template-elementti: passiivinen sisältö
- Mallien kloonaaminen cloneNode-menetelmällä
- templaten käyttö JavaScript-renderöinnissä
- Mallit ja innerHTML:n tietoturva