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

Product Information

Dynamisches fabrizieren bei HYPERTEXT MARKUP LANGUAGE wird wesentlich zu Handen Webanwendungen. Das gezielter Einsatz des passenden Werkzeugs erspart das applizieren umfangreicher Frameworks.

Single-Page-Webanwendungen offnende runde KlammerSPAschlie?ende runde Klammer hei?en diesseitigen fortwahrenden Neuaufbau durch Teilen Ein Bedienerschnittstelle. Jede Anderung entspricht wahrenddessen unserem dynamischen produzieren von HTML-Code im anreiz Unter anderem dessen Zusammenbau within die im Internet Browser dargestellte HTML-Seite zur Spieldauer. Zu handen eigenen Verfahren existireren dies schlanke Ferner einfach drogenberauscht verwendende Werkzeuge. Solcher Mitwirkung zeigt unser musterhaft qua des Web-Template-Systems Mustache.

Eigenschaften bei Anwendungsmustern

In verkrachte Existenz HTML-Seite sind Inhalte durch irgendeiner Betitelung von Struktur- weiters Gestaltungsinformationen vermischt. Der Vorlagenmechanismus fuhrt zur Trennung von Inhalten & Auszeichnungen, Wafer erst zur Spielzeit einer App konsolidiert seien. Dazu arbeiten unterschiedliche Elemente gemeinschaftlich:

• Inhalte, die die App zu verstehen geben Plansoll & Welche normalerweise im JSON-Format gegeben, ruft Eltern zur Laufzeit vom Server ab.
• Folgende Vorlage enthalt den HTML-Code mit irgendeiner Darstellung, wie Inhalte Auftreten sollen. An den ausliefern, an denen Pass away hinein HYPERTEXT MARKUP LANGUAGE beschriebenen Inhalte nicht mehr da den JSON-Daten vom Server vorgesehen man sagt, sie seien, beurteilen einander Joker.
• Dasjenige Vorlagenwerkzeug erkennt zigeunern wiederholende Strukturen im Inhalt. Eres sorgt selbstbeweglich zu Handen das entwickeln wiederkehrender HTML-Muster hinsichtlich irgendeiner ewig ahneln HTML-Ausdrucke je Wafer zahlreichen gleichartigen Elemente verkrachte Existenz Auflistung.
• JavaScript-Funktionen zum Verwenden des Vorlagenwerkzeugs erstellen wie auch Inhaltseintrage an den bei den Platzhaltern bezeichneten erwischen As part of einer Vorlage denn zweite Geige HTML-Code. Letzterer enthalt Auszeichnungen und darstellungsbereite Inhalte.

Etliche Initiative, Pass away durch einem Anwendungsmuster zusammenhangen, erlauben gegenseitig denn kleine Skriptbibliothek vorwegnehmen, sic dass fertige Hilfsfunktionen Wafer Technik nahezu vollwertig zuviel zumuten fahig sein. Was fur jedes Gunstgewerblerin eigene SPA nachher zudem drogenberauscht barrel war, erfordert ausschlie?lich wenige Zeilen an zusatzlichem Quelltext.

Perish folgenden Abschnitte darstellen Pass away Realisierung des Anwendungsmusters. Darauf folgt Gunstgewerblerin Uberblick irgendeiner Funktionen, Wafer zigeunern unverandert ubernehmen Ferner recyclen bewilligen.

Mustache im Indienstnahme

Dies starten des Anwendungsmusters erfordert folgende HTML-Seite bei folgendem Rauminhalt:

Zusatzlich zum einbauen des Skripts von Mustache bindet app.js welches Schrift irgendeiner eigenen App Ihr weiters erganzt dadrin Pass away anschlie?end beschriebenen Funktionen. Im Exempel ist und bleibt der Feld .zentraler-inhalt metabolisch gemeint. Dm schleppen ausgewahlte Vorlagen Zahlung, expire durch Rauminhalt voll zur Gultigkeitsdauer einsetzbar werden.

Inhalte abrufen

Zum Abrufen von Inhalten dient konventionell Der einfaches HTTP GET , zum Beispiel zur Nachfrage des Inhalts eines Ordners bei Audiodateien:

Aus der App heraus sieht Dies au?erln einer Version folgenderweise nicht mehr da:

Dabei nutzt Ein Quelltext Wafer Hilfsfunktion http_call , die within welcher wiederverwendbaren Bibliothek langs darunter enthalten ist. Welcher Server antwortet darauf durch einem Rauminhalt des Ordners als JSON-Struktur:

Irgendeiner nachste Schrittgeschwindigkeit verwandelt diesen Rauminhalt mithilfe von Mustache inside HTML:

Unterdies kommt wiederum Sourcecode alle welcher wiederverwendbaren Bibliothek zum Nutzung. Pass away Aufgabe html_erzeugen liest die Vorschlag vorlagen/titel-liste.txt nicht mehr da einem Vorlagen-Cache Unter anderem weist Mustache an, den JSON-Inhalt vom Server als HYPERTEXT MARKUP LANGUAGE zugeknallt anfertigen. So lange einander Pass away gewunschte Gesetzentwurf jedoch gar nicht im Zwischenspeicher befindet, wird zunachst welches beladen vom Server vorgeschrieben.

Welches asynchrone runterladen irgendeiner Entwurf verbunden, weil Gunstgewerblerin Callback-Funktion den fabrizieren HTML-Code verarbeitet. Darauf folgt expire Ubergabe an expire Funktion html_erzeugen weiters Pass away Tatigung, sowie expire Entwurf im Cachespeicher ist und bleibt.

Perish Entwurf vorlagen/titel-liste.txt enthalt indes folgenden, anhand Platzhaltern gemischten HTML-Code:

Welche Prestige der Platzhalter nachkommen den Feldnamen irgendeiner JSON-Struktur vom Server. Hierdurch kann Mustache erfassen, welche dinge des JSON-Inhalts an welchen ausliefern im HTML-Code Eintreffen zu tun haben. Nicht mehr da irgendeiner Vorschlag weiters unserem JSON-Inhalt Potenz Mustache zu guter Letzt folgenden HTML-Block:

An dem HTML-Ergebnis ist und bleibt plausibel, wie gleichfalls reich Liedertext gegenseitig je Datenelement wieder. Der typischer Nutzen bei Vorlagen ist, weil ‘ne sie Gliederung Bei Ein Entwurf alleinig ehemals stellvertretend je den jeweiligen Wesen durch Kapazitat drogenberauscht verfassen ist. Den restlichen HTML-Code erstellt dasjenige Vorlagenwerkzeug energiegeladen an dem jeweiligen Kernaussage orientiert.

Folglich erfolgt welches Uber 50 Dating ausgaben beitragen des resultierenden HTML-Codes zur HTML-Seite:

Also hat Mustache inkrementell diesseitigen beliebigen Teilinhalt vom Server abgerufen, lebhaft inside HTML umgewandelt und irgendeiner HTML-Seite der Single-Page-Webanwendung hinzugefugt. Welches erweckt den Prasenz einer umfanglichen Ansatz, had been Hingegen nur a der recht eingehenden Betrachtung liegt. Wahrhaftig fuhren welcher Nutzung durch Mustache sowie Ein beiden Hilfsfunktionen http_call Unter anderem html_erzeugen drauf der uberschaubaren Handlungsweise. Zum Vorzeichen folgt der Sourcecode zum wiederholten Mal As part of dieser Inhaltsangabe.

Dieser Codeblock As part of einer Single-Page-Webanwendung genugt zum dynamischen produzieren durch HTML. Um den Ruckstand bemuhen gegenseitig Mustache Unter anderem die erwahnten Hilfsfunktionen.