Wir haben im letzten Video mit ein bisschen Wirrwarr aufgehört. Alles in einem JavaScript-Block mischten wir Datenabruf, Anzeige- und Geschäftslogik sowie Vorlagen. In diesem Video werden wir diese Dinge aufteilen, um uns auf den Weg zu besser organisiertem, wartbarem und verständlichem Code zu machen. Ein großer Teil davon ist das Templating.
Nehmen Sie die Nummer 1 in unserem Template-Abenteuer mit dem Lenker. Lenker haben einen cleveren Ansatz, da der HTML-Code für die Vorlage buchstäblich in den HTML-Code eingefügt wird. Sie verwenden ein spezielles Tag. Dies sorgt für ein gutes Authoring, da wir uns von der Ungeschicklichkeit der String-Verkettung (all diesen Anführungszeichen und Plusses) lösen und die nette Syntaxhervorhebung für HTML erhalten können, die Ihr Editor bereitstellt. Unsere Vorlage sah letztendlich so aus:
((movieTitle))
((movieDirector))
Beachten Sie das seltsame typeAttribut auf dem Skript-Tag. Dadurch wird verhindert, dass der Inhalt dieses Tags ausgeführt wird. Letztendlich reißt der Lenker nur die Eingeweide dieses Tags heraus und verwandelt es in eine Vorlagenfunktion. Ziemlich clevere Art, wirklich damit umzugehen.
Diese ((movieTitle))Teile sind die wichtigen Teile. Wir übergeben letztendlich ein Objekt an die Vorlagenfunktion, die erstellt wird, und die Eigenschaften dieses Objekts stimmen mit diesen Platzhalterbits überein. Der Lenker wird vermutlich als Lenker bezeichnet, da diese Platzhalterbits in geschweiften Klammern eingeschlossen sind, die von oben ein bisschen wie Lenker aussehen.
Nach dem einfachen Tutorial auf der Lenker-Website erstellen wir unsere Vorlagenfunktion wie folgt:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Dann forrufen wir innerhalb unserer Schleife unsere neue Vorlagenfunktion mit dem Objekt (dem Kontext) auf, das einen einzelnen Film enthält. Der HTML-Code wird zurückgegeben und an die Seite angehängt.
var html = template(data.movies(i)); $("#movies").append(html);Wir nehmen auch die Vorlage in diesem Video und filmen sie auf einen anderen Stift. Das bedeutet nur, wie Sie wahrscheinlich Ihren eigenen Code in einem realen Projekt auflösen würden. Die Vorlage wäre mit ziemlicher Sicherheit eine Art "Include".
Hier sind wir gelandet:
Siehe den Stift mdCjJ von Chris Coyier (@chriscoyier) auf CodePen
Wir haben hier einige gute Schritte in Richtung eines besseren Codes gemacht, aber wir müssen noch mehr tun, um ihn perfekt sauber zu machen.