Lass mich dadurch erzahlenZurechtgezwirbelt: Mit Mustache zur dynamischen Single-Page-App

Lass mich dadurch erzahlenZurechtgezwirbelt: Mit Mustache zur dynamischen Single-Page-App

Dynamisches anfertigen durch HTML wird ausschlaggebend pro Webanwendungen. Ein gezielter Verwendung des passenden Werkzeugs erspart welches applizieren umfangreicher Frameworks.

Single-Page-Webanwendungen Klammer aufSPAschlie?ende runde Klammer bedeuten einen fortwahrenden Neuaufbau von Teilen dieser Bedienoberflache. Jede Modifizierung entspricht unterdessen DM dynamischen fabrizieren von HTML-Code im anreiz und dessen Zusammensetzen in die im Internet Browser dargestellte HTML-Seite zur Ablaufzeit. Fur diesen Verfahrensweise existireren parece schlanke oder einfach drauf verwendende Werkzeuge. Der Mitgliedsbeitrag zeigt das vorbildlich mit des Web-Template-Systems Mustache.

Eigenschaften durch Anwendungsmustern

Within der HTML-Seite werden Inhalte durch der Beschriftung durch Struktur- Ferner Gestaltungsinformationen unrein. Der Vorlagenmechanismus fuhrt zur Abschied durch Inhalten oder Auszeichnungen, Wafer erst zur Gultigkeitsdauer einer App vereinheitlicht Anfang. Dazu ackern ausgewahlte Elemente gemeinschaftlich:

  • Inhalte, Pass away die App anzeigen Plansoll Unter anderem Welche ublich im JSON-Format vorhanden, ruft Die leser zur Spieldauer vom Server ab.
  • Gunstgewerblerin Antrag enthalt den HTML-Code bei dieser Erlauterung, wie Inhalte Auftreten mussen. An den Stellen, an denen die inside HTML beschriebenen Inhalte aufgebraucht den JSON-Daten vom Server angedacht werden, beurteilen zigeunern Wildcard.
  • Unser Vorlagenwerkzeug erkennt gegenseitig wiederholende Strukturen im Kernaussage. Es sorgt automatisch z. Hd. unser entwickeln wiederkehrender HTML-Muster entsprechend irgendeiner fortgesetzt ubereinstimmen HTML-Ausdrucke z. Hd. Perish zahlreichen gleichartigen Elemente verkrachte Existenz Register.
  • JavaScript-Funktionen zum applizieren des Vorlagenwerkzeugs anfertigen wie auch Inhaltseintrage an den durch den Platzhaltern bezeichneten fangen within einer Antrag wanneer nebensachlich HTML-Code. Letzterer enthalt Auszeichnungen & darstellungsbereite Inhalte.

Jede menge Kampagne, Perish durch diesem Anwendungsmuster einhergehen, zulassen umherwandern Alabama kleine Skriptbibliothek vorgreifen, dass weil fertige Hilfsfunktionen Perish Prozedere weitestgehend rundum zuviel zumuten fahig sein. Was fur ’ne eigene SPA sodann noch zu tun sei, erfordert einzig manche Zeilen an zusatzlichem Programmcode.

Wafer folgenden Abschnitte charakterisieren Perish Realisierung des Anwendungsmusters. Darauf folgt Gunstgewerblerin Uberblick dieser Funktionen, Wafer gegenseitig eins-zu-eins antreten Ferner recyclen lassen.

Mustache im Verwendung

Welches einleiten des Anwendungsmusters erfordert folgende HTML-Seite anhand folgendem Kernaussage:

Nachtraglich zum einbauen des Skripts durch Mustache bindet app.js unser Skript einer eigenen App Ihr weiters erganzt darin Welche nachkommend beschriebenen Funktionen. Im Musterbeispiel sei der Rubrik .zentraler-inhalt veranderlich gemeint. Einem anhaben ausgewahlte Vorlagen Rechnung, Wafer mit Fassungsvermogen voll zur Spielzeit einsetzbar man sagt, sie seien.

Inhalte abrufen

Zum Abrufen von Inhalten dient konventionell Der einfaches HYPERTEXT TRANSFER PROTOCOL GET , etwa zur Nachfrage des Inhalts eines Ordners mit Audiodateien:

Alle der App hervor sieht welches verwirklichen welcher Version folgenderweise alle:

Dieserfalls nutzt Ein Quelltext Pass away Hilfsfunktion http_call , die As part of irgendeiner wiederverwendbaren Bibliothek der Lange nach unter enthalten ist. Dieser Server antwortet darauf anhand Mark Rauminhalt des Ordners Alabama JSON-Struktur:

Einer nachste Schritt verwandelt eigenen Kernaussage unter Einsatz von von Mustache within HYPERTEXT MARKUP LANGUAGE:

Dabei kommt erneut Source nicht mehr da dieser wiederverwendbaren Bibliothek zum Indienstnahme. Perish Funktion html_erzeugen liest die Entwurf vorlagen/titel-liste.txt alle dem Vorlagen-Cache Ferner weist Mustache an, den JSON-Inhalt vom Server als HYPERTEXT MARKUP LANGUAGE bekifft herstellen. Sobald umherwandern expire gewunschte Vorlage jedoch gar nicht im Cache befindet, ist zunachst das beladen vom Server notig.

Unser asynchrone herunterladen dieser Gesetzesvorlage abhangig, dass die Callback-Funktion den fertigen HTML-Code verarbeitet. Darauf folgt expire Einlieferung A perish Aufgabe html_erzeugen und Perish Tatigung, sobald Wafer Gesetzesvorlage im Cachespeicher ist.

Wafer Vorlage vorlagen/titel-liste.txt enthalt indes folgenden, bei Platzhaltern gemischten HTML-Code:

Pass away Reputation einer Wildcard nachkommen den Feldnamen irgendeiner JSON-Struktur vom Server. Hierdurch vermag Mustache wiederkennen, die gimmick des JSON-Inhalts an welchen ausliefern im HTML-Code Eintreffen verpflichtet sein. Aus dieser Gesetzesvorlage & DM JSON-Inhalt Herrschaft Mustache zu guter anschreiben planetromeo Letzt folgenden HTML-Block:

An dem HTML-Ergebnis war eingangig, wie gleichfalls viel Literatur zigeunern jemals Datenelement wiederum. Der typischer Nutzen bei Vorlagen sei, dass ’ne sie Gerust hinein irgendeiner Gesetzesvorlage allein ehemals stellvertretend fur den jeweiligen Typ durch Kapazitat zu aufsetzen wird. Den restlichen HTML-Code erstellt Dies Vorlagenwerkzeug energiegeladen Amplitudenmodulation jeweiligen Inhalt orientiert.

Also erfolgt dasjenige Hinzufugen des resultierenden HTML-Codes zur HTML-Seite:

Also hat Mustache diskret einen beliebigen Teilinhalt vom Server abgerufen, energiegeladen within HYPERTEXT MARKUP LANGUAGE umgewandelt Ferner welcher HTML-Seite einer Single-Page-Webanwendung hinzugefugt. Welches erweckt den Erscheinungsbild der umfanglichen Ansatz, welches Jedoch ausschlie?lich A ein Lizenz eingehenden Studie liegt. Eigentlich mit sich bringen Ein Indienstnahme durch Mustache wie noch einer beiden Hilfsfunktionen http_call Unter anderem html_erzeugen drauf einer uberschaubaren Methode. Zum Indikator folgt der Quelltext wiederum within dieser Uberblick.

Welcher Codeblock hinein einer Single-Page-Webanwendung genugt zum dynamischen generieren von HYPERTEXT MARKUP LANGUAGE. Damit den Reliquie bemuhen umherwandern Mustache weiters Wafer erwahnten Hilfsfunktionen.

Posted in PlanetRomeo alternative.