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

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

Dynamisches fabrizieren von HYPERTEXT MARKUP LANGUAGE ist entscheidend zu Handen Webanwendungen. Ihr gezielter Indienstnahme des passenden Werkzeugs erspart welches zum Einsatz bringen umfangreicher Frameworks.

Single-Page-Webanwendungen offnende runde KlammerSPAKlammer zu sein diesseitigen fortwahrenden Neuaufbau von Teilen irgendeiner User Interface. Jede Anderung entspricht solange diesem dynamischen fabrizieren von HTML-Code im anreiz Unter anderem dessen Zusammenbau hinein Welche im Browser dargestellte HTML-Seite zur Spieldauer. Fur einen Prozedur existireren eres schlanke weiters einfach zu verwendende Werkzeuge. Dieser Mitgliedsbeitrag zeigt welches exemplarisch qua des Web-Template-Systems Mustache.

Eigenschaften durch Anwendungsmustern

As part of verkrachte Existenz HTML-Seite eignen Inhalte durch welcher Ehrung bei Struktur- oder Gestaltungsinformationen synkretisch. Ein Vorlagenmechanismus fuhrt zur Abschied bei Inhalten und Auszeichnungen, Wafer erst zur Spieldauer der App konsolidiert seien. Dafur arbeiten diverse Elemente zusammen:

  • Inhalte, Pass away Pass away App andeuten soll oder Wafer erwartet im JSON-Format vorliegen, ruft Die Kunden zur Ablaufzeit vom Server Anrufbeantworter.
  • Die Vorschlag enthalt den HTML-Code mit dieser Erklarung, wie Inhalte Ankunft zu tun sein. An den ausliefern, an denen expire in HTML beschriebenen Inhalte leer den JSON-Daten vom Server angedacht seien, ermessen zigeunern Wildcard.
  • Dies Vorlagenwerkzeug erkennt einander wiederholende Strukturen im Inhalt. Sera sorgt selbststandig fur unser erzeugen wiederkehrender HTML-Muster wie gleichfalls irgendeiner ewig ahneln HTML-Ausdrucke fur Wafer zahlreichen gleichartigen Elemente der Register.
  • JavaScript-Funktionen zum gebrauchen des Vorlagenwerkzeugs erzeugen plus Inhaltseintrage an den durch den Platzhaltern bezeichneten ergeben As part of irgendeiner Vorschlag Alabama nebensachlich HTML-Code. Letzterer enthalt Auszeichnungen Unter anderem darstellungsbereite Inhalte.

Mehrere Kampagne, Perish durch unserem Anwendungsmuster kovariieren, zulassen sich wie kleine Skriptbibliothek vorausbemerken, so sehr weil fertige Hilfsfunktionen expire Prozedur fast ganz ubernehmen konnen. Was zu Handen ‘ne eigene SPA hinterher jedoch zu erledigen ist und bleibt, erfordert lediglich einige Zeilen an zusatzlichem Kode.

Welche folgenden Abschnitte charakterisieren Pass away Implementierung des Anwendungsmusters. Darauf folgt die eine Uberblick der Funktionen, die gegenseitig authentisch an Kindes Statt annehmen Ferner wiederverwenden lassen.

Mustache im Indienstnahme

Dies einsteigen des Anwendungsmusters erfordert folgende HTML-Seite anhand folgendem Kernaussage:

Jenseits zum pastieren des Skripts durch Mustache bindet app.js dasjenige Schriftsystem dieser eigenen App Der Unter anderem erganzt darin Pass away nachfolgend beschriebenen Funktionen. Im Beispiel ist Ein Feld .zentraler-inhalt abwandelbar gemeint. Diesem schleppen einige Vorlagen Rechnung, die Mittels Kapazitat gefullt zur Spieldauer einsetzbar sind.

Inhalte abrufen

Zum Abrufen durch Inhalten dient althergebracht ein einfaches HTTP GET , z.B. zur Abfrage des Inhalts eines Ordners durch Audiodateien:

Nicht mehr da einer App heraus sieht welches vornehmen dieser Ausgabe wie folgt alle:

Dabei nutzt Ein Programmcode Pass away Hilfsfunktion http_call , Pass away inside irgendeiner wiederverwendbaren Bibliothek weiter herab enthalten ist. Ein Server antwortet darauf anhand DM Fassungsvermogen des Ordners Alabama JSON-Struktur:

Welcher nachste Hosenschritt verwandelt einen Volumen mit bei Mustache hinein HYPERTEXT MARKUP LANGUAGE:

Unterdies kommt erneut Quelltext alle irgendeiner wiederverwendbaren Bibliothek zum Nutzung. Expire Funktion html_erzeugen liest Wafer Vorlage vorlagen/titel-liste.txt nicht mehr da unserem Vorlagen-Cache oder https://datingreviewer.net/de/newhoney-test/ weist Mustache an, den JSON-Inhalt vom Server wie HYPERTEXT MARKUP LANGUAGE bekifft anfertigen. Wenn umherwandern die gewunschte Antrag noch keineswegs im Cache-Memory befindet, war an erster Stelle unser beladen vom Server vorgeschrieben.

Welches asynchrone runterladen einer Vorschlag bedingt, weil die Callback-Funktion den fertigen HTML-Code verarbeitet. Darauf folgt Pass away Einlieferung A welche Aufgabe html_erzeugen und Welche Abhaltung, wenn Welche Gesetzentwurf im Cachespeicher war.

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

Welche Namen welcher Joker entsprechen den Feldnamen Ein JSON-Struktur vom Server. Auf diese Weise vermag Mustache schnallen, die dinge des JSON-Inhalts an welchen erwischen im HTML-Code erscheinen zu tun haben. Alle dieser Gesetzesvorlage Unter anderem dem JSON-Inhalt Machtigkeit Mustache im Endeffekt folgenden HTML-Block:

An dem HTML-Ergebnis sei nahe liegend, entsprechend viel Text sich in Abhangigkeit Datenelement wiederholt. Ein typischer Nutzen von Vorlagen ist, weil eine sie Gerust within der Entwurf lediglich ehemals stellvertretend pro den jeweiligen Sorte durch Inhalt bekifft formulieren sei. Den restlichen HTML-Code erstellt Dies Vorlagenwerkzeug voll innerer Kraft an dem jeweiligen Inhalt orientiert.

Dementsprechend erfolgt das beitragen des resultierenden HTML-Codes zur HTML-Seite:

Also hat Mustache stufenweise einen beliebigen Teilinhalt vom Server abgerufen, lebhaft Bei HYPERTEXT MARKUP LANGUAGE umgewandelt Unter anderem welcher HTML-Seite der Single-Page-Webanwendung hinzugefugt. Dasjenige erweckt den Prasenz einer umfanglichen Methode, had been Jedoch lediglich an irgendeiner Anspruch eingehenden Analyse liegt. Wirklich fuhren irgendeiner Indienstnahme durch Mustache plus Ein beiden Hilfsfunktionen http_call Ferner html_erzeugen zugeknallt der uberschaubaren Verfahrensweise. Zum Anzeichen folgt Ein Programmcode zum wiederholten Male As part of Ein Ubersicht.

Dieser Codeblock hinein verkrachte Existenz Single-Page-Webanwendung genugt zum dynamischen anfertigen durch HYPERTEXT MARKUP LANGUAGE. Damit den Relikt kummern gegenseitig Mustache weiters Perish erwahnten Hilfsfunktionen.