Using Inline Partials and Decorators with Handlebars 4.0

Lenker, eine beliebte JavaScript-Vorlagenbibliothek für clientseitige und serverseitige Rendering, erweitert die Schnurrbartspezifikation für eine verbesserte Vorlagenverwaltung. Für Neuankömmlinge wird die Erforschung von JavaScript -Vorlagen mit Lenker über einen Pluralsight -Kurs empfohlen. Lenker 4.0 (September 2015) führten erhebliche Verbesserungen ein: Inline -Teil- und Dekorateure. In diesem Artikel werden beide untersucht, in denen die Syntax und der optimale Gebrauch detailliert werden.

Schlüsselkonzepte:

• Lenker 4.0 wichtige Merkmale: Inline -Partials (wiederverwendbare Vorlagen) und Dekorateure (Modify -Rendering -Zustände).
• Inline -Partials: In Vorlagen definiert, wodurch die Notwendigkeit einer JavaScript -Registrierung beseitigt wird. Sie sind blockgeschützt und begrenzen die Nutzung auf die aktuellen und verschachtelten Bereiche. Ideal für kleine, wiederverwendbare HTML -Snippets.
• Dekoratoren: Ändern Sie die Lenkerprogrammfunktion und beeinflussen die Laufzeit vor der Ausführung. Nützlich, um Kontextdaten oder Helfer zu verändern.
• Dekorateure verbessern die Modularität, Erweiterbarkeit und Testbarkeit der Code, insbesondere für Aufgaben wie Währungsformatierung.
• Beide Funktionen rationalisieren die Front-End-Entwicklung, was zu saubereren, organisierten und potenziell effizienteren Code führt.

inline partials

Partials, ein gemeinsames Vorlagenkonzept, fördern die Wiederverwendung von Code, indem wiederverwendbare Vorlagen in einzelne Dateien getrennt werden. Die traditionellen Teilnehmer von Lenker haben jedoch Einschränkungen: globaler Umfang, die JavaScript-Registrierung (obwohl sie häufig von Vorkompilern behandelt werden) und die Trennung von ihrem Nutzungskontext. Dies beschränkt ihre Verwendung oft nur auf die größten wiederverwendbaren Codeblöcke.

Inline -Partials befassen sich mit diesen Problemen. In Vorlagen mithilfe der Lenkersyntax definiert sie, erfordern sie keine JavaScript -Registrierung. Ihre blockgeschützte Natur beschränkt ihre Verwendung auf die aktuellen und Kinderbereiche. Wählen Sie Inline -Partials für kleine, wiederverwendbare HTML -Segmente, die entweder zu klein für separate Dateien sind oder ausschließlich in einer einzelnen Vorlage verwendet werden.

Verwenden von Inline -Partials

deklarieren Sie ein Inline -Teil, indem Sie den wiederverwendbaren Code mit {{#* inline "partialName"}} ... {{/inline}} einwickeln. Verwenden Sie es dann in der Vorlage über {{> partialName}}.

Beispiel:

, anstatt <code><li>{{firstName}} {{lastName}}</li> {{{FirstName}} {{Lastname}}

zu wiederholen, verwenden Sie ein Inline -Teil:

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

Vergleiche Teilungen und Inline -Partials

{{firstName}} {{lastName}} Betrachten Sie eine Vorlage mit wiederholten

:

• traditionelles Teil: erfordert eine separate JavaScript -Datei, um Handlebars.registerPartial('fullName', '{{firstName}} {{lastName}}'); und dann in der Vorlage als {{> fullName}} zu registrieren. Dies trennt die Definition des Teils und macht das Verständnis der vollständigen Vorlage herausfordernder.

• Inline partiell: ein sauberer, in sich geschlossener Ansatz:

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

Dekoratoren

Dekorateure ändern die Lenkerprogrammfunktion und beeinflussen den Rendering -Prozess. Sie bieten Metadaten zur Verbesserung der Vorlagenfunktionalität und fungieren als grundlegenderer Begleiter für Helferfunktionen.

Lenkerkompilierung beinhaltet: 1. Erhalten der Vorlage; 2. kompilieren es; 3.. Rendern der Ausgabe. Dekoratoren gehen in den Kompilierungsschritt (Handlebars.compile) ein und beeinflussen die blockgekopierten kompilierten Funktionen. Sie steuern die Ausführung vor dem Rendern und ermöglichen Änderungen zu Kontextdaten oder Helfern.

Verwenden von Dekoratoren

Dekoratoren werden mit Handlebars.registerDecorator() registriert. Die Funktion empfängt (program, props, container, context).

• program: Die kompilierte Lenkerfunktion. Ändern Sie Argumente, Rückgabewerte oder Kontext.
• props: Die hier festgelegten Eigenschaften beeinflussen die Programmfunktion, auch wenn sie ersetzt werden. Nützlich für Metadaten.
• container: Der Lenker -Laufzeitbehälter (Teil, Helfer, Kontext). Modifizierbar.
• context: Der übergeordnete Kontext, einschließlich der Argumente und Daten für Dekorateure.

Der Dekorateur muss eine Funktion (oder einen falsy -Wert) zurückgeben, um die modifizierte Vorlage zu rendern.

Beispiel: Währungsformatierung

Vor dem Lenker 4.0 stützte sich die Währungsformatierung häufig auf Helfer. Dekoratoren bieten eine elegantere Lösung.

Ein Dekorateur kann einen Helfer für Währungsformatierung dynamisch registrieren, der auf dem Kontext basiert:

{{#* inline "fullName"}}{{firstName}} {{lastName}}{{/inline}}
<h1 id="Hello-fullName">Hello {{> fullName}}</h1>

dann in der Vorlage:

Handlebars.registerDecorator('activateFormatter', function(program, props, container, context) {
    // ... logic to select currency formatter based on context ...
    container.helpers = { formatMoneyHelper: selectedFormatter };
});

Dieser Ansatz ist modularer, erweiterbarer und Testbarer als Helfer allein.

Schlussfolgerung

Inline -Partials und Dekorateure verbessern den Lenker erheblich und verbessern die Codeorganisation, die Wiederverwendbarkeit und die Testbarkeit. Sie sind wertvolle Instrumente, um pflegendere und effizientere Front-End-Anwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonUsing Inline Partials and Decorators with Handlebars 4.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!