#23: Templating mit Handlebars

Im letzten Video endeten wir mit einem ziemlichen Durcheinander. In einem einzigen JavaScript-Block vermischten wir Datenabruf, Anzeige und Geschäftslogik sowie Templating. In diesem Video werden wir beginnen, diese Dinge aufzuteilen, um zu einem organisierteren, wartbareren und verständlicheren Code zu gelangen. Ein großer Teil davon ist das Templating.

Unser erster Versuch beim Templating ist mit Handlebars. Handlebars verfolgt einen cleveren Ansatz, bei dem das HTML für die Vorlage buchstäblich im HTML platziert wird. Sie verwenden ein spezielles <script>-Tag. Das ermöglicht eine gute Autorenschaft, da wir uns von der Ungeschicklichkeit der String-Verkettung (all die Anführungszeichen und Pluszeichen) verabschieden und die schöne Syntaxhervorhebung für HTML erhalten können, die Ihr Editor bietet. Unsere Vorlage sah letztendlich so aus

<script id="movie-template" type="text/x-handlebars-template">
  <div class='module module-movie' style='background-image: url({{movieImage}})'>
    <div class='movie-info'>
      <h3 class='movie-title'>
         {{movieTitle}}
      </h3>
      <p class='movie-director'>
         {{movieDirector}} 
      </p>
    </div>
  </div>
</script>

Beachten Sie das seltsame type-Attribut im Skript-Tag. Das verhindert die Ausführung des Inhalts dieses Tags. Letztendlich reißt Handlebars nur den Kern dieses Tags heraus und verwandelt ihn in eine Template-Funktion. Ziemlich clevere Art, damit umzugehen.

Diese Teile wie {{movieTitle}} sind die wichtigen Teile. Wir übergeben letztendlich ein Objekt an die erstellte Templating-Funktion, und die Eigenschaften dieses Objekts entsprechen diesen Platzhalter-Bits. Handlebars heißt vermutlich Handlebars, weil die Platzhalter-Bits in geschweifte Klammern eingeschlossen sind, die von oben betrachtet ein wenig wie Lenker aussehen.

Nach dem einfachen Tutorial auf der Handlebars-Website erstellen wir unsere Templating-Funktion wie folgt

var source = $("#movie-template").html();
var template = Handlebars.compile(source);

Dann rufen wir innerhalb unserer for-Schleife unsere neue Templating-Funktion mit dem Objekt (dem Kontext) auf, das einen einzelnen Film enthält. Das HTML wird zurückgegeben und wir hängen es an die Seite an.

var html = template(data.movies[i]);
$("#movies").append(html);

Wir nehmen die Vorlage in diesem Video auch und verschieben sie in einen anderen Pen. Das symbolisiert nur, wie Sie Ihren eigenen Code in einem echten Projekt wahrscheinlich aufteilen würden. Die Vorlage wäre fast sicherlich ein "Include" irgendeiner Art.

Hier sind wir gelandet

Siehe den Pen mdCjJ von Chris Coyier (@chriscoyier) auf CodePen

Wir haben hier gute Fortschritte in Richtung eines besseren Codes gemacht, aber wir haben noch mehr zu tun, um ihn perfekt sauber zu bekommen.