#22: Die Notwendigkeit von Templating

Templating ist ein wichtiger Bestandteil der Arbeit mit JavaScript-Anwendungen. Es ist ziemlich üblich, dass Daten für Sie verfügbar sind, aber nicht in einem Format, das für die Anzeige auf dem Bildschirm bereit ist. Das sind üblicherweise (aber nicht immer) Daten im JSON-Format. Das ist ein großartiges Format für die Arbeit mit JavaScript, aber wir müssen es immer noch in etwas formatieren, das wir verwenden können.

Zum Beispiel, hier sind einige fiktive Daten, die wir zur Hand haben könnten

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"
    },
    ...
  ]
}

Und letztendlich möchten wir das machen zu

<div class="module module-movie" style="background-image: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg);">
  <div class="movie-info">
   <h3 class="movie-title">Ender's Game</h3>
   <p class="movie-director">Gavin Hood</p>
  </div>
</div>

Sie denken vielleicht, dass jQuery darin großartig ist. jQuery ist voll von DOM-Traversierungs-/Manipulationswerkzeugen. Aber man könnte sagen, dass es keine sehr robuste Sammlung von DOM-Erstellungswerkzeugen hat. Ich glaube, das jQuery-Team hat zu irgendeinem Zeitpunkt die Hinzufügung von Templating in Erwägung gezogen und sogar mit einem „offiziellen“ Plugin experimentiert, aber es hat sich nicht durchgesetzt.

In diesem Video machen wir einfach nicht das, was heute traditionell als Templating angesehen wird. Wir bauen einfach ein neues <div> mit jQuery und verwenden String-Konkatenation, um das benötigte HTML zu erstellen und es letztendlich auf die Seite zu injizieren. Technisch gesehen ist daran nichts falsch, aber ich versuche hervorzuheben, wie schnell dieser Ansatz außer Kontrolle geraten kann.

In dem kleinen bisschen JS, das wir in diesem Video schreiben, mischen wir eine Vielzahl von Belangen/Aufgaben

Abrufen der Daten. Wir haben sie hier zur Hand, aber wahrscheinlich ist das etwas komplexer. Vielleicht eine asynchrone Ajax-Anfrage mit Fehlerbehandlung und Caching und so weiter.
Anzeigelogik. Entscheiden, was wir anzeigen müssen. Wie viele? Welche Teile? Basierend worauf?
Ereignisbehandlung. Unsere neu injizierten Divs hatten Ereignisbehandlung, als wir sie erstellten, anstatt zu delegieren.
Templating. Das HTML, das wir erstellen, um das Design zu erreichen, die Daten zu strukturieren und unsere Bedürfnisse zu erfüllen.

Das ist der spaghettimäßige Code, mit dem wir geendet haben

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

Der nächste Block von Videos wird sich viel um Templating drehen, weil das super wichtig ist, aber letztendlich werden wir all diese Belange auseinandernehmen und mit viel organisierterem und wartbarem Code enden.

Austin Peterson

# 24. Oktober 2014

Wie könnte ich JSON verwenden, um eine Liste von Links zu erstellen, dann diese Links verwenden, um die im selben JSON-File gespeicherten Daten abzurufen und diese als eine Seite zu formatieren, die ohne Neuladen geladen wird?

$.getJSON('products.json', function(data) {
    console.log(data.category.stemcells.length);
    var i;

    for (i = 0; i &lt; data.category.stemcells.length; i++) {
  $("", {
    html: "<a href='" + data.category.stemcells[i].link + "' rel="nofollow">" + data.category.stemcells[i].name + "</a>"
    }).appendTo("#movies");
}

});

Antworten

Chris Coyier

Permalink zum Kommentar# 25. Oktober 2014

Ich habe Schwierigkeiten zu verstehen, was Sie brauchen. Es klingt, als wären Sie auf dem richtigen Weg, wenn Sie durch das JSON iterieren. Erklären Sie es gerne noch einmal oder erstellen Sie einen Pen, der das Problem demonstriert, damit die Leute es sehen können.

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen