Erstellen von HTML -Vorlagen mit Schnurrbart.js.js

Webanwendungen verwenden normalerweise die MVC -Architektur, um die Geschäftslogik von Präsentationsansichten zu trennen. Komplexe Projekte umfassen eine große Anzahl von Client -HTML, die JavaScript -Operationen verwenden, was schwer zu warten ist. In diesem Fall können wir ein Vorlagensystem verwenden, um die Wiederverwendbarkeit zu verbessern und die Ansichtsmanagementaufgaben zu vereinfachen. Mustache.js bietet ein gut dokumentiertes Vorlagensystem, mit dem Vorlagen verwaltet werden können. Da der Schnurrbart mehrere Sprachen unterstützt, müssen wir auf der Serverseite kein separates Vorlagensystem verwenden. Dieser Artikel beschreibt die Grundlagen der Verwendung von Schnurrbart.

Schlüsselpunkte

• mustache.js ist ein gut dokumentiertes Vorlagensystem, mit dem HTML-Vorlagen in komplexen Webanwendungen verwaltet, die Wiederverwendbarkeit verbessert und die Ansichtsmanagementaufgaben vereinfacht werden können.
• mustache.js ist unlogisch, was bedeutet, dass seine Vorlage keine IF-ELSE-Bedingungen oder für Schleifen enthält. Es verwendet Etiketten, die von Doppelspangen bezeichnet werden, um der Vorlage Daten hinzuzufügen.
• Schnurrbartvorlagen können auf verschiedene Arten definiert werden, einschließlich Inline -Methoden, Inline -Skripten und externen HTML -Snippets. Welche Methode zu wählen, hängt von den spezifischen Anforderungen des Projekts ab.
• mustache.js ist ein Multifunktions-Tool, das sowohl auf dem Client als auch auf der Serverseite verwendet werden kann und mehrere Sprachen unterstützt. Es enthält auch Tags zum Verwalten komplexer Vorlagen wie Variablen, Abschnitte, Funktionen und Teilvorlagen.

Warum brauchen wir ein Vorlagensystem?

Die meisten Entwickler, die nichts über Vorlagensysteme kennen, erstellen neue HTML -Codeblockungen und fügen sie mit JavaScript dynamisch in das DOM ein. Eine gemeinsame Methode besteht darin, das HTML -Element als Zeichenfolge anzugeben, dann die InnerHTML -Eigenschaft festlegen oder die Jquery HTML () -Methode aufrufen. Hier ist ein Beispiel:

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Eine andere Möglichkeit, ein DOM zu erstellen

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

Beide oben genannten Methoden können das Dokument dynamisch Elemente zum Dokument hinzufügen. Betrachten Sie eine Situation, in der wir eine gut gestaltete Kugelliste haben, die auf drei verschiedenen Seiten von Seiten der Website verwendet werden muss. Mit diesen Techniken müssen wir die Liste des HTML -Code an drei verschiedenen Orten wiederholen. Dies wird oft als schlechte Codierungsgewohnheit angesehen. In diesem Fall können wir vordefinierte Vorlagen an verschiedenen Orten verwenden, ohne den Code zu duplizieren. Mustache.js ist eine sehr beliebte JavaScript -Vorlage -Engine. Da der Schnurrbart in mehreren Sprachen serverseitige und clientseitige Vorlagen anbietet, müssen wir uns keine Sorgen um die Auswahl einer separaten Vorlagen-Engine machen.

Anfänger von Schnurrbart.js

Schnurrbart ist ein logikfreies Open-Source-Vorlagensystem, das für Sprachen wie JavaScript, Ruby, Python, PHP und Java geeignet ist. Sie können auf die offizielle Seite auf GitHub zugreifen, um eine Kopie der Bibliothek zu erhalten. Schnurrbart verwendet Vorlagen und Ansichten als Grundlage zum Erstellen dynamischer Vorlagen. Die Ansicht enthält die JSON -Daten, die in die Vorlage enthalten sind. Eine Vorlage enthält Präsentation HTML oder Daten mit Vorlagen -Tags, die Ansichtsdaten enthalten. Wir haben früher erwähnt, dass Schnurrbart unlogisch ist. Dies bedeutet, dass die Vorlage keine IF-ELSE-Bedingungen oder für Schleifen enthält. Beginnen wir nun mit der Schnurrbartvorlage mit einem einfachen Beispiel.

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Zunächst müssen wir die Datei redache.js in das Dokument aufnehmen. Dann können wir die Schnurrbartvorlage erstellen. Im obigen Beispiel haben wir eine Ansicht, die den Namen und den Beruf einer Person enthält. Wir verwenden dann Tags, die den Code und den Namen und die Karrieredaten in der Funktion render () präsentieren. Etiketten werden durch doppelte Klammern oder Bärte dargestellt, die sie umgeben. Lassen Sie uns nun sehen, wie die Render () -Methode funktioniert.

Rendern der Schnurrbartvorlage

Der folgende Code zeigt die Implementierung der Funktion render () in der Datei mustache.js. Drei Parameter können an Render () übergeben werden. Die ersten beiden Parametervorlage und -ansicht sind erforderlich. Partials können als dynamische Vorlagen angesehen werden, die Sie in die Hauptvorlage injizieren können. In unserem vorherigen Beispiel haben wir die Vorlage als Inline -Parameter, die Ansicht als zweite Parameter, übergeben und der Ausgabevariablen das Ergebnis zuweisen.

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

Dies ist die grundlegendste Form von Vorlagen mit Schnurrbart. Schauen wir uns andere Methoden an, mit denen mehr kanonische Code erstellt werden kann.

Definitionsbündchen -Schnurrbart -Vorlage

Es gibt verschiedene Möglichkeiten, Schnurrbartvorlagen in Ihrer Anwendung zu definieren. Diese Methoden ähneln der Verwendung von Inline -Stilen, Inline -Stylesheets und externen Stylesheets, die CSS enthalten. Das zuvor diskutierte Beispiel kann als Inline -Methode angesehen werden, da wir die Vorlage direkt an die Funktion übergeben. Diese Methode verhindert die Möglichkeit wiederverwendbarer Vorlagen. Lassen Sie uns sehen, wie Sie eine Vorlage als Inline -Skriptvorlage definieren, anstatt sie direkt an eine Funktion weiterzugeben.

Vorlage als Inline -Skript

wir können zu

gehen

Sie können so viele Vorlagen mit unterschiedlichen IDs in das Dokument einbeziehen, wie Sie möchten. Wenn Sie eine Vorlage verwenden möchten, verwenden Sie InnerHTML, um das HTML in das Skript -Tag zu erhalten und sie als Vorlage zu übergeben. Unser erstes Beispiel wird in den folgenden Code geändert:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mustache.js Inline Method</title>
  <🎜>
</head>
<body>
  <🎜>
  <p id="person"></p>
</body>
<🎜>
</html>

Wie Sie sehen, wird die Vorlage separat gespeichert und bei Bedarf dynamisch verwendet. Diese Methode erhöht die Möglichkeit der Wiederverwendung von Vorlagen. Die Verwendung von Inline -Skripten beschränkt jedoch den Umfang der Vorlage auf eine Seite. Wenn Sie mehrere Seiten haben, müssen Sie die Vorlage erneut definieren. Die Einbeziehung von Vorlagen in externe Dateien wäre die ideale Lösung - genau wie CSS.

Vorlage als externer HTML -Snippet

In dieser Technik werden wir JQuery verwenden, um Vorlagen zu implementieren. JQuery bietet eine Funktion namens load (), mit der ein Teil eines externen Dokuments erreicht werden kann. Wir werden diese Methode verwenden, um die Vorlage dynamisch aus der externen Vorlagendatei zu laden. Die Funktion load () führt Skripte aus, anstatt sie zurückzugeben. Daher können wir keine Vorlagen in Skript -Tags erstellen, wie wir es in der vorherigen Methode getan haben. Das folgende Beispiel zeigt die externe Vorlagendatei, die wir verwenden werden.

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Wir haben das Element <div> anstelle von Skripten für Vorlagen verwendet, um es mit der Load () -Funktion von JQuery kompatibel zu machen. Hier haben wir drei verschiedene Vorlagen mit drei verschiedenen IDs. Verwenden wir diese Vorlagen weiterhin in Ihrer Seite. <pre class='brush:php;toolbar:false;'>var title = document.createElement('div'); var highlight = document.createElement('span'); var highlight_text = document.createTextNode(&quot;Highlight&quot;); var author = document.createElement('span'); var author_text = document.createTextNode(&quot;Author&quot;); var container = document.getElementById('container'); highlight.appendChild(highlight_text); title.appendChild(highlight); author.appendChild(author_text); title.appendChild(author); container.appendChild(title);</pre> <p> jQuery fügt das zurückgegebene Dokument in ein HTML -Element ein, anstatt es einer Variablen zuzuweisen. Daher benötigen wir einen virtuellen Container, um die Vorlage zu halten. Ich habe den standardmäßigen Vorlagenbehälter verwendet, der standardmäßig versteckt ist. Das obige Beispiel ruft Template1 ab und lädt es. Wir können dann die Vorlage aus dem virtuellen Container erhalten und sie zum Rendern an Schnurrbart übergeben. So funktionieren externe Methoden. Wir können auch die AJAX -Anforderung verwenden, um Daten vom Server abzurufen. </p> <p> <strong> Schlussfolgerung </strong> </p> <p> Template -Motoren und Frameworks sind sehr wichtig, um komplexe Systeme mit dynamisch ändernden Präsentationsansichten zu verwalten. Mustache.js ist eine der besten Auswahlmöglichkeiten für Administratorvorlagen auf der Clientseite. Wir erklären zu Beginn dieses Tutorials, warum Vorlagen wichtig sind. Dann führen wir weiterhin verschiedene Techniken mit Schnurrbartvorlagen ein. Sie können nun einen Weg auswählen, die Schnurrbartvorlage in Ihrem Projekt zu implementieren. Wir haben verschiedene Techniken zur Verwendung von Schnurrbartvorlagen untersucht. Schnurrbart enthält jedoch auch Tags wie Variablen, Abschnitte, Funktionen und Teilvorlagen, mit denen komplexe Vorlagen verwaltet werden. Die Diskussion der Syntax für jedes Tag ist jenseits des Rahmens dieses Tutorials. Sie finden eine umfassende Anleitung zum Schnurrbart -Tag auf der Schnurrbart -Github -Seite. Fühlen Sie sich frei, Ihre früheren Erfahrungen mit mustache.js zu teilen! </p> <p> <strong> mustache.js faq (faq) </strong> </p> <ul> <li> <strong> Was ist der Hauptunterschied zwischen Schnurrbart.js und anderen Bibliotheken für JavaScript -Vorlagen? </strong> </li> </ul> <p> mustache.js ist eine logische Vorlagensyntax. Dies bedeutet, dass es für HTML, Konfigurationsdateien, Quellcode - alles verwendet werden kann. Es wird durch Erweiterung der Beschriftungen in Vorlagen mit dem im Objekt angegebenen Hash oder Werten erweitert. Im Gegensatz zu anderen JavaScript -Vorlagenbibliotheken enthält Schnurrbartschache.js keine Anweisungen, Anweisungen, Anklauseln oder für Schleifen. Stattdessen gibt es nur Etiketten. Einige Tags werden durch einen Wert ersetzt, andere haben nichts, andere sind eine Reihe von Werten. </p> <ul> <li> <strong> Wie benutzt man redache.js für HTML -Vorlagen? </strong> </li> </ul> <p> Um redache.js für HTML -Vorlagen zu verwenden, müssen Sie zunächst das Skript mustache.js in die HTML -Datei aufnehmen. Dann definieren Sie eine Vorlage innerhalb des <code><script></script> Tags. Diese Vorlage kann Platzhalter enthalten, um Daten einzufügen. Diese Platzhalter werden durch doppelte Klammern wie {{name}} dargestellt. Anschließend verwenden Sie den Schnurrbart.render () -Funktion, um die Vorlage mit den von Ihnen angegebenen Daten zu rendern.

• Kann ich Schnurrbart mit node.js verwenden?

Ja, Sie können mit node.js.js.js.js.js. Dazu müssen Sie das Schnurrbartpaket mit NPM installieren. Sobald die Installation abgeschlossen ist, benötigen Sie sie in der Datei node.js und verwenden die Vorlage.

• Wie verwendet man Schnurrbart.js, um Arrays zu durchqueren?

In Mustache.js können Sie das Array mit der {{#Array}}… {{/array}} syntax durchqueren. In diesem Block können Sie {{.}} Verwenden, um das aktuelle Element im Array zu verweisen. Auf diese Weise können Sie jedes Element im Array in der Vorlage anzeigen.

• Wie verwendet man bedingte Aussagen in Schnurrbart.js?

Während Schnurrbartschache.js eine logisch unlogische Vorlagenbibliothek ist, die traditionelle Angaben nicht unterstützt, können Sie weiterhin Abschnitte verwenden, um ähnliche Ergebnisse zu erzielen. Abschnitte rendern Textblöcke einmal oder mehr Male basierend auf dem Wert des Schlüssels im Datenobjekt.

• Wie kann man einige Vorlagen in Schnurrbart.js einbeziehen?

Einige Vorlagen in Schnurrbart.js ermöglichen es Ihnen, kleinere Vorlagen in eine größere Vorlage aufzunehmen. Dies ist sehr nützlich, um gemeinsame Elemente wie Header und Fußzeilen wiederzuverwenden. Um Teilvorlagen einzuschließen, können Sie die {{& gt; partielle}} -Syntax verwenden.

• Wie kann man HTML in Schnurrbart.js entkommen?

standardmäßig entkommt Schnurrbart.js HTML in den Daten, um XSS -Angriffe zu verhindern. Wenn Sie HTML aus Ihren Daten rendern möchten, können Sie die Triple Brace -Syntax wie {{{HTML}}} verwenden.

• Kann ich Schnurrbart für die Serverseite verwenden?

Ja, Sie können Schnurrbartschache.js für die Serverseite verwenden. Dies ist nützlich, um Vorlagen zu rendern, bevor sie an den Client gesendet werden, und die Menge an JavaScript, die im Client ausgeführt werden muss, verringert.

• Wie man eine Vorlage in Schnurrbart.js vorkompiliert?

Vorkompetenvorlagen in Schnurrbart.js können die Leistung verbessern, indem die Arbeiten, die zur Laufzeit erfolgen müssen, reduziert werden. Um eine Vorlage vorzubereiten, können Sie die Funktion mit Schnurrbart () verwenden.

• Wie kann man Schnurrbartschache.js -Vorlage debuggen?

Debugging der Vorlage von redache.js kann schwierig sein, da die Bibliothek nicht viele Fehlermeldungen enthält. Sie können jedoch die Funktion der Schnurrbart verwenden. Parse (), um zu überprüfen, ob Ihre Vorlage gültig ist. Diese Funktion gibt eine Reihe von Tags zurück, die Sie überprüfen können, um festzustellen, ob Ihre Vorlagenstruktur korrekt ist.