Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Moderne Webanwendungen mit Node.js und Express.js

Dynamische Inhalte mit Templates abbilden

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dynamische Inhalte und ein Template-System bieten ideale Synergien bei der Darstellung unterschiedlichster Datensätze.

Transkript

Um variable Inhalte in die eigene Seite zu bringen, ist es notwendig die Brücke zwischen dem JavaScript aus Node.Js, als auch den Inhalten in Form von HTML zu schlagen. Hierbei gilt es, die Synergien von Express und Jade zu nutzen. Zum einen werde ich nun mit Ihnen Variablen übergeben und als nächstes damit Logik innerhalb der jeweiligen Ansicht abbilden. Um nun Inhalte in meiner Posts.Jade-Datei zu verändern, begebe ich mich zunächst einmal in die Rute selbst. Hier kann ich hinter dem Render-Befehl ein sogenanntes JSON-Objekt als Parameter für die View mitgeben. Ich definiere also nun ein weiteres Objekt mit der Bezeichnung Post und gebe diesem Post eine sogenannten Title "My First article" und eine Description, beispielsweise „Lorem ipsum“. Ich habe jetzt zwar die Daten abbilden können, muss allerdings noch die Ansicht so verändern, dass mit diesen Daten gearbeitet wird. Dafür begebe ich mich in die Posts.Jade-Datei und suche mir den ersten Post raus, mit dem Titel "Upgrade to Bootstrap 3" und der jeweiligen Beschreibung. Alle für mich unerheblichen Sachen entferne ich und ändere nun die Referenz innerhalb des Artikels "Titel" mit Hilfe der Konvention von Raute, geschweifter Klammer auf, geschweifte Klammer zu und kann nun auf den Post verweisen der ein Objekt ist, der entsprechend an diese View übergeben wird. Und auf diesem Post finde ich nun das Attribut "Title". Ähnlich gehe ich hier vor: Ich referenziere den Post und in dem Fall die Description. Starte ich nun entsprechend den Server und begebe mich auf die Unterseite "/Posts" so sehe ich, dass der erste Artikel sich verändert hat und nun die Bezeichnung trägt "My First article – Lorem ipsum", die aus dem jeweiligen JavaScript übergeben worden sind. Das alleine genügt mir aber nicht, da ich unter Umständen mehrere Beiträge innerhalb meiner Jade-Datei abbilden möchte, nicht nur einen Eintrag. Ich gehe also zurück in die Post.Js-Datei und mache aus einem Beitrag mehrere Beiträge mit Hilfe eines Erase, das sich unter Posts befindet und den jeweiligen Unterobjekten "My First article“ und "My second article". Nun muss ich allerdings meiner View entsprechend beibringen, mit mehreren Posts umgehen zu können. Für diesen Zweck habe ich innerhalb von Jade die Möglichkeit mit dem Aufruf von "Each", dann der Bezeichnung einer Variablen, in dem Fall bietet sich Post an, auf eine andere Eingabevariable zu referenzieren, in dem Fall Posts und durch Einrückung zu bestätigen, dass alles was unter diesem Each steht, entsprechend oft wiederholt werden kann. Starte ich den Server nun noch einmal und aktualisiere die Seite, so sind nun beide Artikel zu sehen. Jade selbst ist eine relativ mächtige Sprache, was die Möglichkeiten angeht, Logik innerhalb der Ansichten abzubilden. Mitunter ist es sogar möglich, JavaScript-Code innerhalb der Views abzubilden, sodass dieser evaluiert wird bevor die View dargestellt wird. Für alle Möglichkeiten rund um Jade empfiehlt es sich, einen kurzen Blick auf die Seite Jade-Lang.com zu werfen, um Eindrücke dafür zu bekommen, was tatsächlich alles möglich ist. In den vergangenen Minuten habe ich nun mit Hilfe einer Übergabe von Variablen an meine View, sogenannte JSON-Objekte innerhalb der Rute übergeben und durch Referenzierung mit der Konvention "Raute, geschleifte Klammer auf, geschweifte Klammer zu" auf diese jeweiligen Objekte verweisen können. Um mit mehr als nur einem Objekt arbeiten zu können, war es mir auch möglich mit Hilfe von Jade und einer sogenannten Iteration über mehrere Objekte hinweg eine Schleife abzubilden.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!