Ein Anfängeranleitung für Lenker

Heutzutage besteht der Großteil des Webs aus dynamischen Anwendungen, in denen sich die Daten häufig ändern. Infolgedessen müssen die Daten, die im Browser wiedergegeben wurden, kontinuierlich aktualisiert. Hier kommen JavaScript -Templating -Motoren zur Rettung und werden so nützlich. Sie vereinfachen den Prozess der manuellen Aktualisierung der Ansicht und verbessern gleichzeitig die Struktur der Anwendung, indem sie Entwicklern ermöglichen, die Geschäftslogik vom Rest des Codes zu trennen. Einige der bekanntesten JavaScript-Templating-Motoren sind Schnurrbart, Unterstrich, EJS und Lenker. In diesem Artikel werden wir unsere Aufmerksamkeit auf Lenker richten, indem wir seine Hauptmerkmale diskutieren.

Key Takeaways

• Lenker ist eine logiklose Templating-Engine, die den Schnurrbart erweitert. Er fügt minimale Logik durch Helfer hinzu, wodurch sie ideal zur Trennung der HTML-Struktur von der Geschäftslogik und zur Verbesserung der Wartbarkeit der Anwendungen.
• Vorlagenerstellung im Lenker beinhaltet die Verwendung von doppelten lockigen Klammern `{{}}` für Variablen, die vorkompiliert werden können, um die Leistung zu verbessern und die clientseitige Verarbeitung zu verringern.
• Lenker unterstützt benutzerdefinierte Helfer, sodass Entwickler komplexe Logik innerhalb der Vorlagen implementieren und Flexibilität über die einfache Datenbindung hinaus bieten.
• Teilvorlagen im Lenker erleichtern die Wiederverwendbarkeit von Code in verschiedenen Teilen einer Anwendung, optimieren den Entwicklungsprozess und die Aufrechterhaltung der Konsistenz.
• Vorkompilierung von Lenkervorlagen kann die Leistung von Webanwendungen erheblich verbessern, indem der Laufzeitaufwand auf der Client -Seite minimiert wird.

Lenker: Was es ist und warum man es verwenden

Lenker ist eine logiklose Templating-Engine, die Ihre HTML-Seite dynamisch erzeugt. Es handelt sich um eine Erweiterung des Schnurrbartes mit einigen zusätzlichen Funktionen. Schnurrbart ist vollständig logisch ohne, aber im Lenker fügt dank der Verwendung einiger Helfer (z. B. mit, sofern nicht jeweils) minimale Logik hinzu, die wir in diesem Artikel weiter diskutieren werden. Tatsächlich können wir sagen, dass Lenker ein Superset von Schnurrbart ist.

Lenker können wie jede andere JavaScript -Datei in den Browser geladen werden:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Wenn Sie fragen, warum Sie diesen Vorlagenmotor und nicht einen anderen anwenden sollten, sollten Sie sich seine Profis ansehen. Hier ist eine kurze Liste:

• Sie hält Ihre HTML-Seite sauber und trennt die logischlosen Vorlagen von der Geschäftslogik in Ihren JavaScript-Dateien, wodurch die Struktur der Anwendung (und auch der Wartbarkeit und Skalierbarkeit)
verbessert wird.
vereinfacht die Aufgabe, die Daten in der Ansicht
• manuell zu aktualisieren
Es wird in beliebten Frameworks und Plattformen wie Ember.js, Meteor.js, Derby.js und Ghost

verwendet

Ich hoffe, dass diese kurze Zusammenfassung Ihnen bei der Entscheidung hilft, ob es sich lohnt, Lenker zu verwenden oder nicht.

Wie funktioniert es?

Wie im obigen Diagramm gezeigt, können die Way -Lenkerwerke wie folgt zusammengefasst werden:

1. Lenker nimmt eine Vorlage mit den Variablen und kompiliert sie in eine Funktion
2. Diese Funktion wird dann ausgeführt, indem ein JSON -Objekt als Argument bestanden wird. Dieses JSON -Objekt ist als Kontext bekannt und enthält die Werte der Variablen, die in der Vorlage
verwendet werden
3. Bei ihrer Ausführung gibt die Funktion das erforderliche HTML zurück, nachdem die Variablen der Vorlage durch ihre entsprechenden Werte
ersetzt werden können

Beginnen wir mit einer Demo, die alle oben genannten Schritte im Detail erläutert.

Vorlagen

Vorlagen können beide in der HTML -Datei oder separat geschrieben werden. Im ersten Fall werden sie im Attribut "type =" text/x-Handlebs-Template "und einer ID im <script> -Tag mit" text/x-Handleber-Template "angezeigt. Die Variablen sind in doppelten lockigen Klammern {{}} geschrieben und werden als Ausdrücke bezeichnet. Hier ist ein Beispiel: <p> <p> <pre >&lt;span &gt;&lt;span &gt;&lt;span &gt;&lt;script src&lt;span &gt;=&quot;/path/to/handlebars.min.js&quot;&gt;&lt;span &gt;&lt;span &gt;&lt;/script&gt;&gt; Mit diesem Vorschlag können wir sehen, was wir verwenden müssen. In Ihrer JavaScript -Datei müssen wir zunächst die Vorlage aus dem HTML -Dokument abrufen. Im folgenden Beispiel verwenden wir die ID der Vorlage für diesen Zweck. Nachdem die Vorlage abgerufen wurde, können wir sie mit der Methode von landbars.comPile () kompilieren, die eine Funktion zurückgibt. Diese Funktion wird dann ausgeführt, indem der Kontext als Argument übergeben wird. Wenn die Ausführung abgeschlossen ist, gibt die Funktion das gewünschte HTML mit allen durch ihre entsprechenden Werte ersetzten Variablen zurück. Zu diesem Zeitpunkt können wir die HTML in unsere Webseite injizieren. &lt;p&gt; &lt;/p&gt; diese Beschreibung in Code verwandeln, führt zum folgenden Snippet: &lt;p&gt; &lt;/p&gt; &lt;p&gt; &lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; id&lt;span &gt;=&quot;handlebars-demo&quot;&lt;/script&gt;&lt;/span&gt; type&lt;span&gt;=&quot;text/x-handlebars-template&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;div&gt;My name is {{name}}. I am a {{occupation}}.&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> Eine Live -Demo dieses Code finden Sie in dieser Codepen -Demo <p> </p> <h2 id="syntaxes"> syntaxes </h2> <p> Jetzt ist es Zeit, ein bisschen tiefer in Lenker einzutauchen. Wir werden einige wichtige Begriffe und Syntaxe durchlaufen, die den Kern von Lenker bilden. </p> <h3 id="Ausdrücke"> Ausdrücke </h3> <p> Wir haben bereits Ausdrücke im obigen Abschnitt gesehen. Die in den Vorlagen verwendeten Variablen sind von doppelten lockigen Zahnspangen umgeben {{}} und werden als Ausdrücke bezeichnet: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html(); &lt;/span&gt;&lt;span&gt;// Compile the template data into a functionvar templateScript = Handlebars.compile(template); &lt;/span&gt;&lt;span&gt;var context = { &quot;name&quot; : &quot;Ritesh Kumar&quot;, &quot;occupation&quot; : &quot;developer&quot; }; &lt;/span&gt;&lt;span&gt;// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context); &lt;/span&gt;&lt;span&gt;// Insert the HTML code into the page$(document.body).append(html);&lt;/span&gt;</pre> <h3 id="html-entkommen"> html entkommen </h3> <p> Lenker können dem vom Ausdruck zurückgegebenen Wert entkommen. Zum Beispiel wird das Zeichen <in lt konvertiert. wenn sie nicht m dass lenker aus einem wert entkommen die variable mit triple curly braces umgeben. zum beispiel bei der folgenden vorlage:> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;My name is {{name}}&lt;/span&gt;</pre> <p> wird mit der unten angegebenen Kontextvariablen verwendet: </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning {{language}}. It is {{{adjective}}}.</pre> <p> Das resultierende HTML ist: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;var context = {&quot;language&quot; : &quot;&lt;h3 id=&quot;Handlebars&quot;&gt;Handlebars&lt;/h3&gt;&quot;,&quot;adjective&quot;: &quot;&lt;h3 id=&quot;awesome&quot;&gt;awesome&lt;/h3&gt;&quot;}&lt;/span&gt;</pre> <p> Eine Live -Demo, die diese Funktion zeigt, findet sich in dieser Codepen -Demo </p> <h3 id="Kommentare"> Kommentare </h3> <p> Wir können auch Kommentare in Lenkervorlagen schreiben. Die Syntax für Lenkerkommentare lautet {{! TypeyOrCommenthere}}. Jeder Kommentar, der}} oder ein anderes Symbol mit einer besonderen Bedeutung im Lenker hat, sollte jedoch in der Form {{!-TypeyOrCommenthere-}} geschrieben werden. Lenker Kommentare sind in der HTML nicht sichtbar, aber wenn Sie sie anzeigen möchten, können Sie den Standard-HTML-Kommentar verwenden: . </p> <p> Wenn wir alle diese Konzepte auf die von uns verwendete Vorlage anwenden, können wir den unten gezeigten Code erstellen: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; src&lt;span &gt;=&quot;/path/to/handlebars.min.js&quot;&lt;/script&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Wenn wir die vorherige Vorlage mit der unten angegebenen Kontextvariablen verwenden: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; id&lt;span &gt;=&quot;handlebars-demo&quot;&lt;/script&gt;&lt;/span&gt; type&lt;span&gt;=&quot;text/x-handlebars-template&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;div&gt;My name is {{name}}. I am a {{occupation}}.&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Die HTML -Ausgabe ist: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html(); &lt;/span&gt;&lt;span&gt;// Compile the template data into a functionvar templateScript = Handlebars.compile(template); &lt;/span&gt;&lt;span&gt;var context = { &quot;name&quot; : &quot;Ritesh Kumar&quot;, &quot;occupation&quot; : &quot;developer&quot; }; &lt;/span&gt;&lt;span&gt;// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context); &lt;/span&gt;&lt;span&gt;// Insert the HTML code into the page$(document.body).append(html);&lt;/span&gt;</pre> <p>, was dazu führt, dass der Browser den Inhalt im Standard -HTML -Kommentar nicht zeigt. Eine Demo dieses Beispiels finden Sie hier. </p> <h3 id="blockiert"> blockiert </h3> <p> In Lenker sind Blöcke Ausdrücke mit einer Blocköffnung ({{#}}) und schließen ({{/}}). Wir werden dieses Thema später eingehend untersuchen, während wir uns auf Helfer konzentrieren. Schauen Sie sich vorerst an, wie ein If -Block geschrieben wird: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;My name is {{name}}&lt;/span&gt;</pre> <h3 id="Pfade"> Pfade </h3> <p> Lenker unterstützt sowohl den normalen als auch den verschachtelten Pfad und ermöglicht es, die unter dem aktuellen Kontext verschachtelten Eigenschaften nachzuschlagen. Lenker unterstützt auch das Segment ../ Pfad. Dieses Segment verweist auf den Umfang der übergeordneten Vorlagen und nicht auf eine Ebene im Kontext. </p> <p> Um dieses Thema besser zu verstehen, werden wir das folgende Beispiel verwenden, in dem wir jeden Helfer verwenden (später detailliert detailliert). Wie zu erwarten, iteriert der letztere über die Gegenstände eines Arrays. </p> <p> In diesem Beispiel werden wir die folgende Vorlage verwenden: </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning {{language}}. It is {{{adjective}}}.</pre> <p> durch Bereitstellung dieser Kontextvariablen: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;var context = {&quot;language&quot; : &quot;&lt;h3 id=&quot;Handlebars&quot;&gt;Handlebars&lt;/h3&gt;&quot;,&quot;adjective&quot;: &quot;&lt;h3 id=&quot;awesome&quot;&gt;awesome&lt;/h3&gt;&quot;}&lt;/span&gt;</pre> <p> wir erhalten die unten angegebene Ausgabe: </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;Handlebars&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;. It is &lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;awesome&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Wie die anderen kleinen Ausschnitte, die wir bisher erstellt haben, ist dieses Beispiel auf CodePen </p> verfügbar <h2 id="Helfer"> Helfer </h2> <p> Obwohl Lenker um eine logiklose Vorlagen-Engine handelt, kann sie einfache Logik mithilfe von Helfern ausführen. Ein Lenkerhelfer ist eine einfache Kennung, die von Parametern (durch einen Raum getrennt) folgen kann, wie unten gezeigt: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;!-- I am learning {{language}} --&gt;I am learning {{language}}. It is {{!--adjective--}}&lt;/span&gt;</pre> <p> Jeder Parameter ist ein Lenkerausdruck. Auf diese Helfer kann aus jedem Kontext in einer Vorlage zugegriffen werden. </p> <p> Die Begriffe „Block“, „Helfer“ und „Blockhelfer“ werden manchmal austauschbar verwendet, da die meisten der integrierten Helfer Blöcke sind, obwohl es Funktionshelfer gibt, die sich von Blockhelfern etwas unterscheiden. Wir werden sie diskutieren, während wir benutzerdefinierte Helfer abdecken. </p> <p> Einige eingebaute Helfer sind, wenn jeweils, es sei denn und mit. Lassen Sie uns mehr erfahren. </p> <h3 id="Jedes-Helfer"> Jedes Helfer </h3> <p> Der jede Helfer wird verwendet, um über ein Array zu iterieren. Die Syntax des Helfer ist {{#each arrayName}} yourcontent {{/jeder}}. Wir können uns auf die einzelnen Array -Elemente beziehen, indem wir das Schlüsselwort in diesem Block verwenden. Der Index des Arrays -Elements kann mit {{@index}} gerendert werden. Das folgende Beispiel zeigt die Verwendung der einzelnen Helfer. </p> <p> Wenn wir die folgende Vorlage verwenden: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; src&lt;span &gt;=&quot;/path/to/handlebars.min.js&quot;&lt;/script&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> in Verbindung mit dieser Kontextvariable: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; id&lt;span &gt;=&quot;handlebars-demo&quot;&lt;/script&gt;&lt;/span&gt; type&lt;span&gt;=&quot;text/x-handlebars-template&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;div&gt;My name is {{name}}. I am a {{occupation}}.&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Dann ist die Ausgabe: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html(); &lt;/span&gt;&lt;span&gt;// Compile the template data into a functionvar templateScript = Handlebars.compile(template); &lt;/span&gt;&lt;span&gt;var context = { &quot;name&quot; : &quot;Ritesh Kumar&quot;, &quot;occupation&quot; : &quot;developer&quot; }; &lt;/span&gt;&lt;span&gt;// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context); &lt;/span&gt;&lt;span&gt;// Insert the HTML code into the page$(document.body).append(html);&lt;/span&gt;</pre> <p> Eine lebende Demo dieses Beispiels kann auf Codepen gefunden werden. </p> <h3 id="Wenn-Helfer"> Wenn Helfer </h3> <p> Die IF -Helfer ähnelt einer IF -Anweisung. Wenn die Bedingung zu einem <em> wahrheitsgemäßen </em> -Wertzwert bewertet wird, rendert der Lenker den Block. Wir können auch einen Vorlagenabschnitt angeben, der als "else -Abschnitt" bekannt ist, indem wir {{else}} verwenden. Der Helfer, es sei denn, Helfer ist die Umkehrung des IF -Helfers. Es rendert den Block, wenn die Bedingung einen <em> falsy </em> Wert bewertet. </p> <p> Um zu zeigen, wie der Helfer funktioniert, betrachten wir die folgende Vorlage: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;My name is {{name}}&lt;/span&gt;</pre> <p> Wenn wir die folgende Kontextvariable angeben: </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning {{language}}. It is {{{adjective}}}.</pre> <p> wir erhalten das unten angegebene Ergebnis: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;var context = {&quot;language&quot; : &quot;&lt;h3 id=&quot;Handlebars&quot;&gt;Handlebars&lt;/h3&gt;&quot;,&quot;adjective&quot;: &quot;&lt;h3 id=&quot;awesome&quot;&gt;awesome&lt;/h3&gt;&quot;}&lt;/span&gt;</pre> <p> Dies geschieht, weil ein leeres Array ein <em> falsy </em> Wert ist. </p> <p> Für den Fall, dass Sie mit Helfern spielen möchten, können Sie sich die Live -Demo ansehen, die ich auf Codepen erstellt habe. </p> <h2 id="benutzerdefinierte-Helfer"> benutzerdefinierte Helfer </h2> <p> Sie können Ihre eigenen Helfer erstellen, um komplexe Logik mithilfe des Lenker -Systems auszuführen. Es gibt zwei Arten von Helfern: Funktionshelfer und Blockhelfer. Die erste Definition ist für einen einzelnen Ausdruck gedacht, während letzteres für Blockausdrücke verwendet wird. Die Argumente, die der Rückruffunktion vorgelegt sind, sind die Parameter, die nach dem Namen des Helfers geschrieben wurden, die durch einen Raum getrennt sind. Die Helfer werden mit Lenker erstellt. RegisterHelper () Methode: </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;Handlebars&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;. It is &lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;awesome&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;</pre> <h3 id="benutzerdefinierte-Funktion-Helfer"> benutzerdefinierte Funktion Helfer </h3> <p> Die Syntax für einen Funktionshelfer ist {{Helpername Parameter1 Parameter2 ...}}. Um besser zu verstehen, wie Sie mit der Implementierung fortfahren können, erstellen wir einen Funktionshelfer namens StudyStatus, der eine Zeichenfolge zurückgibt, die "bestanden" wird, wenn pidentyear = 2015: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;!-- I am learning {{language}} --&gt;I am learning {{language}}. It is {{!--adjective--}}&lt;/span&gt;</pre> <p> In unserem Beispiel ist der Parameter nur eins. Wenn wir jedoch weitere Parameter an die Rückruffunktion des Helfer übergeben möchten, können wir sie nach dem ersten Parameter, der durch einen Speicherplatz getrennt ist, in die Vorlage schreiben. </p> <p> entwickeln wir ein Beispiel mit dieser Vorlage: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;var context = {&quot;language&quot; : &quot;Handlebars&quot;,&quot;adjective&quot;: &quot;awesome&quot;}&lt;/span&gt;</pre> <p> und mit der folgenden Kontextvariablen: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;!-- I am learning Handlebars --&gt;I am learning Handlebars. It is&lt;/span&gt;</pre> <p> In diesem Fall ist die Ausgabe: </p> <p> </p> <pre class="brush:php;toolbar:false">{{#if boolean}}Some Content here{{/if}}</pre> <p> Eine lebende Demo dieses Beispiels ist hier verfügbar. </p> <h3 id="benutzerdefinierte-Blockhelfer"> benutzerdefinierte Blockhelfer </h3> <p> benutzerdefinierte Blockhelfer werden genauso verwendet wie Funktionshelper, aber die Syntax ist etwas anders. Die Syntax von Blockhelfern lautet: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; src&lt;span &gt;=&quot;/path/to/handlebars.min.js&quot;&lt;/script&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Wenn wir einen benutzerdefinierten Blockhelfer registrieren, fügt Lenker automatisch ein Optionsobjekt als letzter Parameter zur Rückruffunktion hinzu. Dieses Optionsobjekt hat eine FN () -Methode, mit der wir den Kontext des Objekts vorübergehend ändern können, um auf eine bestimmte Eigenschaft zuzugreifen. Ändern wir das Beispiel des vorherigen Abschnitts mit einem Blockhelfer namens StudyStatus, jedoch mit derselben Kontextvariablen: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;script&gt; id&lt;span &gt;=&quot;handlebars-demo&quot;&lt;/script&gt;&lt;/span&gt; type&lt;span&gt;=&quot;text/x-handlebars-template&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;div&gt;My name is {{name}}. I am a {{occupation}}.&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> <p> Wenn dieser Code in Verbindung mit der unten definierten Vorlage verwendet wird </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html(); &lt;/span&gt;&lt;span&gt;// Compile the template data into a functionvar templateScript = Handlebars.compile(template); &lt;/span&gt;&lt;span&gt;var context = { &quot;name&quot; : &quot;Ritesh Kumar&quot;, &quot;occupation&quot; : &quot;developer&quot; }; &lt;/span&gt;&lt;span&gt;// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context); &lt;/span&gt;&lt;span&gt;// Insert the HTML code into the page$(document.body).append(html);&lt;/span&gt;</pre> <p> wir erhalten das folgende Ergebnis: </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;My name is {{name}}&lt;/span&gt;</pre> <p> Und hier ist die Codepen -Demo. </p> <h2 id="Teilvorlagen"> Teilvorlagen </h2> <p> Lenker -Teil sind Vorlagen, die zwischen verschiedenen Vorlagen geteilt werden können. Sie werden als {{> partiellName}} geschrieben. Bevor wir sie in der HTML verwenden, müssen wir das Teil mithilfe von Lenkermethoden registrieren. Das folgende Beispiel hilft Ihnen dabei, zu verstehen </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning {{language}}. It is {{{adjective}}}.</pre> Bei Verwendung mit der unten definierten Vorlage <p> </p> <p> </p> <pre class="brush:php;toolbar:false">&lt;span&gt;var context = {&quot;language&quot; : &quot;&lt;h3 id=&quot;Handlebars&quot;&gt;Handlebars&lt;/h3&gt;&quot;,&quot;adjective&quot;: &quot;&lt;h3 id=&quot;awesome&quot;&gt;awesome&lt;/h3&gt;&quot;}&lt;/span&gt;</pre> Es wird das folgende Ergebnis geben: <p> </p> <p> </p> <pre class="brush:php;toolbar:false">I am learning &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;Handlebars&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;. It is &lt;span&gt;&lt;span&gt;&lt;h3 id=&quot;gt&quot;&gt;&gt;&lt;/h3&gt;&lt;/span&gt;awesome&lt;span&gt;&lt;span&gt;&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;</pre> Eine Live -Demo dieses Code finden Sie in dieser Codepen -Demo. <p> </p> Vorkompilierung <h2> </h2> Wie wir gesehen haben, ist das erste, was Lenker tut, die Vorlage in eine Funktion zusammenzufassen. Dies ist einer der teuersten Vorgänge, die für den Kunden durchgeführt werden können. Wir können die Leistung der Anwendung verbessern, wenn wir Vorlagenkripten vorkompilieren und dann die kompilierte Version an den Client senden. In diesem Fall ist die einzige Aufgabe, die am Client ausgeführt werden muss, die Ausführung dieser Funktion. Da die vorkompilierte Datei ein Skript ist, können wir das Skript in HTML als normale Datei laden. Mal sehen, wie all dieses Zeug gemacht werden kann. <p> </p> Erstens müssen Sie Lenker weltweit installieren, indem Sie NPM -Lenker installieren -g verwenden. Bitte stellen Sie sicher, dass verschiedene Vorlagen in separaten Dateien mit unterschiedlichen Dateinamen und mit den .handleBars -Erweiterungen (z. B. Demo.handleBars) geschrieben werden. In diesen Dateien besteht keine Verwendung des <script> -Tages. <p>. </script>

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Speichern Sie nun alle Vorlagendateien in einem einzelnen Ordner mit dem Namen Vorlagen. Sie können jeden Ordnernamen verwenden, den Sie wünschen, aber wenn Sie dies tun, vergessen Sie bitte nicht, den folgenden Befehl entsprechend zu ändern. Öffnen Sie also das Terminal und führen Sie den Befehl aus:

<span>var context = {"language" : "Handlebars","adjective": "awesome"}</span>

Dieser Befehl generiert eine Datei mit dem Namen templatescompiled.js, die alle kompilierten Vorlagen enthält. Der Compiler fügt die Vorlagen in Lenker ein. Wenn die Eingabedatei Demo.Handlebars ist, wird sie am adbars.templates.demo

eingefügt.

Jetzt müssen wir TemplatesCompiled.js in die HTML -Datei als normales Skript aufnehmen. Es ist wichtig zu beachten, dass wir die gesamte Lenkerbibliothek nicht laden müssen, da der Compiler selbst nicht mehr benötigt wird. Wir können stattdessen den kleineren „Laufzeit“ -Build verwenden:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Jetzt können wir die vorhandene Vorlage verwenden, die ursprünglich in Demo.handlebars mit dem folgenden Code vorhanden war:

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

Die endgültige Ausgabe lautet wie folgt:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Diese Methode erhöht die Leistung der Anwendung erheblich und die Ladezeit der Seite nimmt auch ab, wenn wir den Laufzeitaufbau von Lenker verwenden, der leichter ist als die gesamte Bibliothek.

Der Code dieser gesamten Vorkompilierung ist auf Github verfügbar.

Schlussfolgerungen

In diesem Artikel haben wir die grundlegenden Konzepte von Lenker erläutert. Wir haben auch seine häufig verwendeten Funktionen und Syntaxe untersucht. Ich hoffe, Sie haben dieses Tutorial genossen und Sie werden die enthaltenen Demos verwenden, um ein gutes Verständnis für dieses Thema zu haben. Ich freue mich darauf, Ihre Kommentare zu lesen.

Wenn Sie die Bibliothek nicht herunterladen möchten, aber dennoch versuchen möchten, können Sie sie online unter http://tryhandleBarsjs.com/.

spielen.

FAQs über Lenker

Wofür werden Lenker verwendet. Es ermöglicht die Erstellung wiederverwendbarer Vorlagen mit Platzhaltern (Lenker) für die Dateninsertion. Diese Bibliothek erleichtert die Bindung des Zwei-Wege-Datenbindung und ermöglicht Vorlagen, automatisch zu aktualisieren, wenn Daten ändert. Entwickler verwenden üblicherweise Lenker für die clientseitige Rendering, die bedingte Logik und die Dateneration. Es fördert die Trennung von Bedenken zwischen HTML-Struktur und Daten und macht es zu einem wertvollen Instrument zum Erstellen interaktiver und datengesteuerter Webanwendungen gleich > Lenker werden typischerweise in Verbindung mit HTML und nicht als Ersatz verwendet. Es bietet mehrere Vorteile in Kombination mit HTML, einschließlich dynamischer Datenbindung, Wiederverwendbarkeit des Codes, einer eindeutigen Trennung von Bedenken zwischen Präsentation und Daten, clientseitigem Rendering, Konsistenz der Inhaltsgenerierung, verbesserter Sicherheit durch Codetrennung und Unterstützung für die Lokalisierung. Diese Vorteile machen den Lenker gemeinsam zu einem wertvollen Tool zum Erstellen dynamischer und wartbarer Webanwendungen und stützen sich weiterhin auf HTML, um die Grundstruktur von Webseiten zu definieren. , Lenker sind nicht veraltet und bleibt eine lebensfähige und weit verbreitete JavaScript -Templating -Bibliothek in der Webentwicklung.

Was ist eine Lenkervorlage? Lenker ist eine JavaScript -Vorlagenbibliothek, mit der Sie diese Vorlagen erstellen können, um HTML -Inhalte basierend auf Daten zu generieren. Diese Lenker sind in doppelten lockigen Klammern {{}} eingeschlossen. Zum Beispiel:

Hallo, {{Name}}! . ““ Wenn Sie diese Vorlage mit bestimmten Daten wie {Name: "John"} rendern, ersetzt Lenker {{Name}} durch den entsprechenden Datenwert:

Hallo, John!

Lenkervorlagen sind besonders nützlich, um einen konsistenten und wartbaren HTML -Inhalt zu erstellen, da sie die Präsentation (HTML -Struktur) von den Daten trennen und die Aktualisierung und Wiederverwendung erleichtern. Vorlagen in Ihrer Webanwendung. Lenker bietet fortschrittlichere Funktionen und eignet sich für komplexe Vorlagenanforderungen und -projekte, bei denen ein größeres Ökosystem und ein größeres Unterstützung für die Gemeinschaft wichtig sind. Der Schnurrbart hingegen ist einfacher und folgt einer „logikfreien“ Philosophie, was es zu einer guten Wahl für Projekte macht, die Einfachheit und Portabilität in mehreren Programmiersprachen priorisieren.

Das obige ist der detaillierte Inhalt vonEin Anfängeranleitung für Lenker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!