We zijn in de laatste video gebleven met een beetje een warboel. Alles in één blok JavaScript mengden we het ophalen van gegevens, weergave en bedrijfslogica en sjablonen. In deze video gaan we die dingen opbreken om ons op weg te helpen naar meer georganiseerde, onderhoudbare en begrijpelijke code. Een groot deel daarvan is de sjablonen.
Neem # 1 op ons sjabloonavontuur met stuur. Handlebars heeft een slimme aanpak doordat de HTML voor de sjabloon letterlijk in de HTML wordt gezet. Je gebruikt een speciale tag. Het zorgt voor een mooie authoring omdat we weg kunnen komen van de onhandigheid van stringconcatenatie (al die aanhalingstekens en plussen) en de mooie syntaxisaccentuering voor HTML krijgen die je editor biedt. Ons sjabloon zag er uiteindelijk zo uit:
((movieTitle))
((movieDirector))
Let op het rare typekenmerk op de script-tag. Dat voorkomt dat de inhoud van die tag wordt uitgevoerd. Uiteindelijk rukt Handlebars gewoon het lef van deze tag eruit en verandert het in een sjabloonfunctie. Behoorlijk slimme manier om er echt mee om te gaan.
Die stukjes ((movieTitle))zijn de belangrijkste onderdelen. We geven uiteindelijk een object door aan de sjabloonfunctie die wordt gemaakt, en de eigenschappen van dat object komen overeen met deze plaatshouderbits. Stuur wordt stuur genoemd, vermoedelijk omdat die plaatshouderbits zijn gewikkeld in accolades die van bovenaf een beetje op een stuur lijken.
Door de eenvoudige tutorial op de Handlebars-website te volgen, maken we onze sjabloonfunctie als volgt:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Vervolgens fornoemen we binnen onze lus onze nieuwe sjabloonfunctie met het object (de context) dat een enkele film bevat. De HTML wordt geretourneerd en we voegen deze toe aan de pagina.
var html = template(data.movies(i)); $("#movies").append(html);We nemen ook de sjabloon in deze video en filmen deze naar een andere pen. Dat geeft gewoon aan hoe u uw eigen code in een echt project waarschijnlijk zou verbreken. Het sjabloon zou vrijwel zeker een soort "include" zijn.
Hier zijn we terechtgekomen:
Zie de Pen mdCjJ door Chris Coyier (@chriscoyier) op CodePen
We hebben hier een aantal goede stappen gezet in de richting van betere code, maar we hebben nog meer te doen om het perfect schoon te krijgen.