Publicerad den Lämna en kommentar

Lass mich daruber erzahlenZurechtgezwirbelt: Mittels Mustache zur dynamischen Single-Page-App

Lass mich daruber erzahlenZurechtgezwirbelt: Mittels Mustache zur dynamischen Single-Page-App

Dynamisches generieren durch HYPERTEXT MARKUP LANGUAGE ist und bleibt wesentlich je Webanwendungen. Das gezielter Verwendung des passenden Werkzeugs erspart unser einsetzen umfangreicher Frameworks.

Single-Page-Webanwendungen (SPAKlammer zu bedeuten den fortwahrenden Neuaufbau bei Teilen dieser Benutzerschnittstelle. Jede Modifikation entspricht indes Mark dynamischen generieren von HTML-Code im Folie & dessen Installation inside Perish im Browser dargestellte HTML-Seite zur Ablaufzeit. Pro folgenden Verfahren gibt dies schlanke & einfach bekifft verwendende Werkzeuge. Solcher Mitgliedsbeitrag zeigt unser musterhaft qua des Web-Template-Systems Mustache.

Eigenschaften durch Anwendungsmustern

Inside der HTML-Seite sie sind Inhalte durch irgendeiner Annotation bei Struktur- weiters Gestaltungsinformationen vermischt. Ihr Vorlagenmechanismus fuhrt zur Auseinandergehen von Inhalten & Auszeichnungen, Wafer erst zur Spielzeit der App vereinheitlicht Anfang. Zu diesem zweck ackern diverse Elemente en bloc:

  • Inhalte, Welche Wafer App zu erkennen geben Zielwert und Wafer typischerweise im JSON-Format vorliegen, ruft Diese zur Gultigkeitsdauer vom Server Telefonbeantworter.
  • Die Antrag enthalt den HTML-Code anhand Ein Beschreibung, hinsichtlich Inhalte erscheinen mussen. An den fangen, an denen Perish in HTML beschriebenen Inhalte aufgebraucht den JSON-Daten vom Server zukunftig eignen, ermessen sich Wildcard.
  • Dasjenige Vorlagenwerkzeug erkennt gegenseitig wiederholende Strukturen im Kernaussage. Sera sorgt maschinell zu Handen dasjenige anfertigen wiederkehrender HTML-Muster wie gleichfalls einer stets ahnlich sein HTML-Ausdrucke z. Hd. die zahlreichen gleichartigen Elemente verkrachte Existenz Auflistung.
  • JavaScript-Funktionen zum applizieren des Vorlagenwerkzeugs anfertigen ebenso wie Inhaltseintrage an den bei den Platzhaltern bezeichneten ausliefern Bei Ein Antrag wanneer untergeordnet HTML-Code. Letzterer enthalt Auszeichnungen oder darstellungsbereite Inhalte.

Viele Initiative, Pass away mit diesem Anwendungsmuster in Zusammenhang bringen, zulassen gegenseitig wie kleine Skriptbibliothek antizipieren, so sehr dass fertige Hilfsfunktionen die Prozedur nahezu rundum antreten im Griff haben. Welches pro eine eigene SPA als nachstes jedoch bekifft klappen war, erfordert lediglich wenige Zeilen an zusatzlichem Code.

Perish folgenden Abschnitte beschreiben Welche Realisierung des Anwendungsmusters. Darauf folgt eine Uberblick Ein Funktionen, die sich ursprunglich annehmen Ferner recyceln Moglichkeit schaffen.

Mustache im Nutzung

Dasjenige Einsetzen des Anwendungsmusters erfordert ’ne HTML-Seite bei folgendem Kernaussage:

Unplanma?ig zum Einbinden des Skripts von Mustache bindet app.js welches Mitschrift dieser eigenen App das Ferner erganzt darin Pass away anschlie?end beschriebenen Funktionen. Im Paradebeispiel wird irgendeiner Bereich .zentraler-inhalt wandelbar gemeint. Dem transportieren verschiedene Vorlagen Kalkulation, Pass away bei Volumen voll https://datingreviewer.net/de/yoomee-test zur Gultigkeitsdauer einsetzbar sind.

Inhalte abrufen

Zum Abrufen von Inhalten dient konventionell das einfaches HTTP GET , zum Beispiel zur Abfrage des Inhalts eines Ordners Mittels Audiodateien:

Leer verkrachte Existenz App heraus sieht dasjenige vornehmen der Version wie folgt leer:

Dabei nutzt irgendeiner Kode Welche Hilfsfunktion http_call , Wafer As part of einer wiederverwendbaren Bibliothek entlang unter enthalten sei. Welcher Server antwortet darauf mit diesem Kernaussage des Ordners wie JSON-Struktur:

Einer nachste Schritttempo verwandelt eigenen Fassungsvermogen mit von Mustache Bei HTML:

In diesem fall kommt erneut Source alle welcher wiederverwendbaren Bibliothek zum Inanspruchnahme. Pass away Zweck html_erzeugen liest Pass away Vorlage vorlagen/titel-liste.txt leer unserem Vorlagen-Cache Unter anderem weist Mustache an, den JSON-Inhalt vom Server wanneer HTML stoned herstellen. Wenn zigeunern Pass away gewunschte Antrag noch keineswegs im Pufferspeicher befindet, sei erst einmal unser Laden vom Server erforderlich.

Dasjenige asynchrone runterladen einer Vorlage bedingt, weil Gunstgewerblerin Callback-Funktion den generieren HTML-Code verarbeitet. Darauf folgt Welche Uberreichung A perish Zweck html_erzeugen Unter anderem Wafer Tatigung, sobald Perish Vorschlag im Zwischenspeicher wird.

Die Gesetzesvorlage vorlagen/titel-liste.txt enthalt wahrenddessen folgenden, bei Platzhaltern gemischten HTML-Code:

Die Reputation der Wildcard entsprechen den Feldnamen Ein JSON-Struktur vom Server. Mit dieser sache konnte Mustache wiederkennen, die gimmick des JSON-Inhalts an welchen erwischen im HTML-Code Eintreffen verpflichtet sein. Leer welcher Gesetzesvorlage Unter anderem einem JSON-Inhalt Gewalt Mustache im Endeffekt folgenden HTML-Block:

Am HTML-Ergebnis wird ersichtlich, wie gleichfalls reichhaltig Liedertext umherwandern jemals Datenelement zum wiederholten Male. Ihr typischer Nutzen bei Vorlagen ist, weil ’ne jene Aufbau hinein der Antrag ausschlie?lich fruher stellvertretend z. Hd. den jeweiligen Erscheinungsform bei Rauminhalt drauf abfassen sei. Den restlichen HTML-Code erstellt dasjenige Vorlagenwerkzeug lebhaft an dem jeweiligen Inhalt orientiert.

Folglich erfolgt das hinzunehmen des resultierenden HTML-Codes zur HTML-Seite:

Somit hat Mustache Schritt fur Schritt einen beliebigen Teilinhalt vom Server abgerufen, voll innerer Kraft within HTML umgewandelt und irgendeiner HTML-Seite der Single-Page-Webanwendung hinzugefugt. Das erweckt den Erscheinungsbild verkrachte Existenz umfanglichen Methode, ended up being aber alleinig an irgendeiner Anspruch eingehenden Betrachtung liegt. Faktisch mit sich bringen welcher Inanspruchnahme von Mustache ebenso wie irgendeiner beiden Hilfsfunktionen http_call und html_erzeugen drogenberauscht einer uberschaubaren Verfahrensweise. Zum Hinweis folgt der Source nochmals within welcher Syllabus.

Welcher Codeblock in der Single-Page-Webanwendung genugt zum dynamischen generieren bei HTML. Um den Uberrest kummern einander Mustache und expire erwahnten Hilfsfunktionen.

Lämna ett svar

Din e-postadress kommer inte publiceras.