Templating is een belangrijk onderdeel van het werken met JavaScript-applicaties. Het komt vrij vaak voor dat gegevens voor u beschikbaar zijn, maar niet in een formaat dat klaar is voor weergave op het scherm. Dat zijn gewoonlijk (maar niet altijd) gegevens in het JSON-formaat. Dat is een geweldig formaat om mee te werken in JavaScript, maar we moeten het nog steeds opmaken in iets dat we kunnen gebruiken.
Hier zijn bijvoorbeeld enkele fictieve gegevens die we mogelijk bij de hand hebben:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )En uiteindelijk willen we daar graag van maken:
Ender's Game
Gavin Hood
Je zou kunnen denken dat jQuery daar geweldig in is. jQuery zit vol met DOM-traversing- / manipulatietools. Maar het heeft geen erg robuuste set DOM-creatiehulpmiddelen, zou je kunnen zeggen. Ik geloof dat het jQuery-team op een gegeven moment overwoog om sjablonen toe te voegen, en zelfs met een "officiële" plug-in speelde, maar het ging niet van de grond.
In deze video doen we gewoon niet wat tegenwoordig traditioneel wordt beschouwd als sjablonen. We bouwen gewoon een nieuwe met jQuery en gebruiken stringconcatenatie om de HTML te bouwen die we nodig hebben en deze uiteindelijk op de pagina te injecteren. Daar is technisch niks aan, maar ik probeer naar huis te rijden hoe deze aanpak snel uit de hand kan lopen.
In slechts het kleine stukje JS dat we in deze video schrijven, mengen we een verscheidenheid aan zorgen / taken:
- De gegevens ophalen. We hebben het hier gewoon bij de hand, maar waarschijnlijk is dit een beetje ingewikkelder. Misschien een asynchroon Ajax-verzoek met foutafhandeling en caching en dergelijke.
- Logica weergeven. Beslissen wat we moeten laten zien. Hoeveel? Welke onderdelen? Gebaseerd op wat?
- Afhandeling van gebeurtenissen. Aan onze nieuw geïnjecteerde div's was gebeurtenisafhandeling toegevoegd terwijl we ze maakten, in plaats van te delegeren.
- Templating. De HTML die we maken om het ontwerp te realiseren, de gegevens te structureren en tegemoet te komen aan of behoeften.
Dit is de spaghetti-achtige code waarmee we klaar zijn:
Zie de Pen 31b07f30dce13b31904da36693b29b41 door Chris Coyier (@chriscoyier) op CodePen
Het volgende blok met video's gaat een heleboel focussen op sjablonen, want dat is superbelangrijk, maar uiteindelijk zullen we al deze zorgen uit elkaar halen en eindigen met veel meer georganiseerde en onderhoudbare code.