Lass mich im zuge dessen erzahlenZurechtgezwirbelt: durch Mustache zur dynamischen Single-Page-App

Lass mich im zuge dessen erzahlenZurechtgezwirbelt: durch Mustache zur dynamischen Single-Page-App

Dynamisches generieren bei HYPERTEXT MARKUP LANGUAGE sei ma?geblich z. Hd. Webanwendungen. Der gezielter Anwendung des passenden Werkzeugs erspart welches zum Einsatz bringen umfangreicher Frameworks.

Single-Page-Webanwendungen (SPAKlammer zu ausmachen angewandten fortwahrenden Neuaufbau bei Teilen welcher Bedienerschnittstelle. Jede Abanderung entspricht indes dem dynamischen herstellen bei HTML-Code im Background oder dessen Zusammenbau Bei die im Web Browser dargestellte HTML-Seite zur Spieldauer. Pro weiteren Prozedur gibt eres schlanke oder einfach bekifft verwendende Werkzeuge. Solcher Mitgliedsbeitrag zeigt dasjenige beispielhaft unter Zuhilfenahme von des Web-Template-Systems Mustache.

Eigenschaften durch Anwendungsmustern

As part of der HTML-Seite seien Inhalte mit irgendeiner Annotation durch Struktur- weiters Gestaltungsinformationen synkretisch. Ihr Vorlagenmechanismus fuhrt zur https://datingreviewer.net/de/tinder-test/ Trennung von Inhalten weiters Auszeichnungen, Welche erst zur Gultigkeitsdauer verkrachte Existenz App vereinheitlicht werden. Zu diesem zweck arbeiten ausgewahlte Elemente gruppenweise:

  • Inhalte, die die App zu erkennen geben Zielwert & expire erwartet im JSON-Format da sein, ruft Eltern zur Spieldauer vom Server ab.
  • Folgende Vorlage enthalt den HTML-Code durch Ein Beschreibung, genau so wie Inhalte Ankunft mussen. An den ausliefern, an denen Wafer As part of HTML beschriebenen Inhalte alle den JSON-Daten vom Server angedacht sind, werten gegenseitig Wildcard.
  • Dies Vorlagenwerkzeug erkennt sich wiederholende Strukturen im Kapazitat. Es sorgt selbstbeweglich je Dies schaffen wiederkehrender HTML-Muster entsprechend der stets ahneln HTML-Ausdrucke zu Handen Welche zahlreichen gleichartigen Elemente verkrachte Existenz Liste.
  • JavaScript-Funktionen zum gebrauchen des Vorlagenwerkzeugs produzieren ebenso wie Inhaltseintrage an den durch den Platzhaltern bezeichneten ausliefern Bei einer Entwurf denn untergeordnet HTML-Code. Letzterer enthalt Auszeichnungen oder darstellungsbereite Inhalte.

Zig Initiative, Welche bei diesem Anwendungsmuster beinhalten, lizenzieren umherwandern denn kleine Skriptbibliothek vorausbemerken, so dass fertige Hilfsfunktionen Pass away Technik so gut wie ganz an Kindes Statt annehmen im Stande sein. Is pro Gunstgewerblerin eigene SPA als nachstes jedoch drauf erledigen sei, erfordert alleinig wenige Zeilen an zusatzlichem Source.

Expire folgenden Abschnitte darstellen Welche Umsetzung des Anwendungsmusters. Darauf folgt Gunstgewerblerin Uberblick einer Funktionen, die umherwandern ursprunglich annehmen weiters rezyklieren bewilligen.

Mustache im Verwendung

Dies beginnen des Anwendungsmusters erfordert die HTML-Seite anhand folgendem Rauminhalt:

Zusatzlich zum pastieren des Skripts durch Mustache bindet app.js welches Mitschrift der eigenen App Ihr oder erganzt darin Welche folgend beschriebenen Funktionen. Im Paradebeispiel sei Ein Kategorie .zentraler-inhalt veranderbar gemeint. Einem tragen unterschiedliche Vorlagen Zahlung, die anhand Volumen gefullt zur Spielzeit einsetzbar werden.

Inhalte abrufen

Zum Abrufen durch Inhalten dient herkommlich Ihr einfaches HYPERTEXT TRANSFER PROTOCOL GET , etwa zur Abfrage des Inhalts eines Ordners anhand Audiodateien:

Aufgebraucht verkrachte Existenz App heraus sieht das exportieren irgendeiner Druck folgenderweise nicht mehr da:

Hierfur nutzt der Code expire Hilfsfunktion http_call , die hinein einer wiederverwendbaren Bibliothek fort herab enthalten wird. Welcher Server antwortet darauf bei dem Kapazitat des Ordners amyotrophic lateral sclerosis JSON-Struktur:

Welcher nachste Stufe verwandelt einen Rauminhalt qua bei Mustache Bei HYPERTEXT MARKUP LANGUAGE:

In diesem fall kommt wiederholt Source aus welcher wiederverwendbaren Bibliothek zum Inanspruchnahme. Welche Feature html_erzeugen liest die Vorschlag vorlagen/titel-liste.txt alle dem Vorlagen-Cache oder weist Mustache an, den JSON-Inhalt vom Server Alabama HTML bekifft produzieren. So lange umherwandern Wafer gewunschte Antrag zudem keineswegs im Pufferspeicher befindet, wird zuallererst welches runterladen vom Server notig.

Unser asynchrone beladen der Antrag abhangig, weil eine Callback-Funktion den generieren HTML-Code verarbeitet. Darauf folgt expire Uberreichung an expire Rolle html_erzeugen Ferner Pass away Erfullung, wenn Pass away Vorschlag im Zwischenspeicher ist und bleibt.

Expire Gesetzesvorlage vorlagen/titel-liste.txt enthalt solange folgenden, Mittels Platzhaltern gemischten HTML-Code:

Perish Prestige welcher Stellvertretersymbol entsprechen den Feldnamen welcher JSON-Struktur vom Server. Auf diese Weise darf Mustache wiedererkennen, die gimmick des JSON-Inhalts an welchen Stellen im HTML-Code Ankunft zu tun sein. Nicht mehr da irgendeiner Gesetzesvorlage & DM JSON-Inhalt macht Mustache schlie?lich folgenden HTML-Block:

Amplitudenmodulation HTML-Ergebnis ist glaubhaft, hinsichtlich im Uberfluss Liedtext zigeunern fur jedes Datenelement wiederholt. Ein typischer Nutzen durch Vorlagen ist, weil folgende ebendiese Aufbau Bei einer Vorlage alleinig fruher stellvertretend fur jedes den jeweiligen Spezies von Rauminhalt stoned verfassen ist und bleibt. Den restlichen HTML-Code erstellt unser Vorlagenwerkzeug dynamisch an dem jeweiligen Kapazitat orientiert.

Demgema? erfolgt unser hinzunehmen des resultierenden HTML-Codes zur HTML-Seite:

Dadurch hat Mustache inkrementell den beliebigen Teilinhalt vom Server abgerufen, energiegeladen in HTML umgewandelt oder einer HTML-Seite der Single-Page-Webanwendung hinzugefugt. Dies erweckt den Anschein einer umfanglichen Prozedere, was Jedoch lediglich a der Erlaubnis eingehenden Begutachtung liegt. Eigentlich initiieren einer Anwendung durch Mustache plus irgendeiner beiden Hilfsfunktionen http_call & html_erzeugen zu einer uberschaubaren Technik. Zum Hinweis folgt einer Code zum wiederholten Mal Bei Ein Inhaltsangabe.

Welcher Codeblock in verkrachte Existenz Single-Page-Webanwendung genugt zum dynamischen produzieren durch HTML. Um den Ruckstand scheren einander Mustache Unter anderem expire erwahnten Hilfsfunktionen.

Leave a comment

Your email address will not be published. Required fields are marked *