Handlebars

Handlebars ist eine einfache Template-Sprache, mit der Sie Ausdrücke in HTML einbetten können. Es ist eine Erweiterung von Mustache, einer weiteren Template-Sprache. Handlebars.js ist eine beliebte Template-Engine, die leistungsstark, einfach zu bedienen ist und eine große Community hat.

Weitere Informationen zu Handlebars finden Sie auf der Handlebars-Website (handlebarsjs.com).

Verfügbare Handlebars

Die folgende Tabelle listet die verfügbaren Handlebars Helpers im Widget Builder mit einer kurzen Beschreibung und Kategorisierung auf.
Folgen Sie den Links zur detaillierten Dokumentation jedes Helpers oder nutzen Sie die Seitenleiste rechts, um zum jeweiligen Helper zu navigieren.

Helper	Beschreibung	Kategorie
eq	Strikte Gleichheit `===`	Bedingt
eqw	Gleichheit `==`	Bedingt
neq	Strikte Ungleichheit `!==`	Bedingt
neqw	Ungleichheit `!=`	Bedingt
lt	Kleiner als `<`	Bedingt
lte	Kleiner oder gleich `<=`	Bedingt
gt	Größer als `>`	Bedingt
gte	Größer oder gleich `>=`	Bedingt
not	Nicht `!`	Bedingt
ifx	Imitiert den bedingten Operator `?:`	Bedingt
empty	Prüft, ob ein Array leer ist	Bedingt
count	Länge eines Arrays	Bedingt
and	Logische `AND`-Operation	Bedingt
or	Logische `OR`-Operation	Bedingt
coalesce	Gibt den ersten nicht-falschen Wert aus einer Parameterliste zurück	Bedingt
includes	Prüft auf einen Wert innerhalb eines Arrays	Bedingt
excerpt	Extrahiert einen Teilstring aus einem String	String
sanitize	Bereinigt einen String zu URL-freundlichem Dash/Kebab-Case	String
newLineToBr	Ersetzt Zeilenumbrüche durch `<br>`-Tags in einem String	String
capitalizeEach	Schreibt den ersten Buchstaben jedes Wortes in einem String groß	String
capitalizeFirst	Schreibt den ersten Buchstaben eines Strings groß	String
sprintf	Erzeugt einen String gemäß dem Formatierungsformat	String
lowercase	String in Kleinbuchstaben	String
uppercase	String in Großbuchstaben	String
first	Erstes Element eines Arrays	String
last	Letztes Element eines Arrays	String
concat	Verbindet zwei oder mehr Strings	String
join	Verbindet Elemente eines Arrays mit einem Trennzeichen	String
substring	Extrahiert einen Teilstring aus einem String	String
sum	Summe zweier Zahlen	Mathematik
difference	Differenz zweier Zahlen	Mathematik
multiplication	Multiplikation zweier Zahlen	Mathematik
division	Division zweier Zahlen	Mathematik
remainder	Rest zweier Zahlen	Mathematik
modulo	Modulo zweier Zahlen	Mathematik
ceil	Rundet eine Zahl auf die nächste ganze Zahl auf	Mathematik
floor	Rundet eine Zahl auf die nächste ganze Zahl ab	Mathematik
abs	Ermittelt den Absolutwert einer Zahl	Mathematik
random	Erzeugt eine Zufallszahl (Ganzzahl/Gleitkomma)	Mathematik
formatDate	Formatiert ein Datum in das angegebene Format	Datum/Zeit
datetime	Manipuliert und formatiert Datum und Uhrzeit	Datum/Zeit
showIf	Zeigt ein HTML-Element an, wenn der Ausdruck wahr ist	HTML
hideIf	Versteckt ein HTML-Element, wenn der Ausdruck wahr ist	HTML
selectedIf	Wählt `<option>` aus, wenn der Ausdruck wahr ist	HTML
checkedIf	Aktiviert die `<input>`-Checkbox, wenn der Ausdruck wahr ist	HTML
options	Erzeugt eine `<option>`-Liste für `<select>`	HTML
formatCurrency	Formatiert einen Währungswert nach Ländercode	Formatierung
json	Konvertiert ein Objekt in einen JSON-String	Hilfsmittel
encode	Kodiert einen String in URI-Format	Hilfsmittel
staffbaseIdToken	Gibt das Staffbase ID Token zurück	Hilfsmittel
staffbaseAccessToken	Gibt das Staffbase Access Token zurück	Hilfsmittel
decode_jwt	Dekodiert ein JWT Token in ein Objekt	Hilfsmittel
extract_jwt	Extrahiert ein bestimmtes Attribut aus einem JWT Token	Hilfsmittel

Bedingt

eq

Prüft, ob zwei Werte gleich sind (===).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{eq '3' 3}}    => false

{{#if (eq foo "bar")}}
  Hello
{{/if}}

eqw

Prüft, ob zwei Werte gleich sind (==), d. h. schwache Prüfung.

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{eqw '3' 3}}   => true

{{#if (eqw foo "bar")}}
  Hello
{{/if}}

neq

Prüft, ob zwei Werte nicht gleich sind (!==).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{neq 4 3}}    => true

{{#if (neq foo "bar")}}
  Hello
{{/if}}

neqw

Prüft, ob zwei Werte nicht gleich sind (!=), schwache Prüfung.

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{neqw '3' 3}}    => false

{{#if (neqw foo "bar")}}
  Hello
{{/if}}

lt

Prüft auf eine Kleiner-als-Bedingung (a < b).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{lt 2 3}}   => true

{{#if (lt 2 5)}}
  Hello
{{/if}}

lte

Prüft auf eine Kleiner-oder-gleich-Bedingung (a <= b).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{lte 2 3}}   => true

{{#if (lte 5 6)}}
  Hello
{{/if}}

gt

Prüft auf eine Größer-als-Bedingung (a > b).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{gt 2 3}}   => false

{{#if (gt 10 7)}}
  Hello
{{/if}}

gte

Prüft auf eine Größer-oder-gleich-Bedingung (a >= b).

Parameter

value1 [any] Erster Wert, der mit dem zweiten verglichen wird. (Erforderlich)
value2 [any] Zweiter Wert, der mit dem ersten verglichen wird. (Erforderlich)

Rückgabe

boolean

Verwendung

{{gte 3 3}}   => true

{{#if (gte 10 2)}}
  Hello
{{/if}}

not

Logisches NOT eines beliebigen Ausdrucks. Entspricht dem !-Operator.

Parameter

expression [any] Ein beliebiger Ausdruck.

Rückgabe

boolean

Verwendung

{{not true}}    => false
{{not false}}   => true

{{#if (not (eq foo "bar"))}}
  Hello
{{/if}}

ifx

Helper zur Nachahmung des ternären bedingten Operators ? :. Z. B. 5 > 7 ? 'foo' : 'bar'.

Parameter

condition [boolean] Erfüllende Bedingung für den ersten Wert. Entweder true oder false. (Erforderlich)
value1 [any] Erster Wert, der als Ergebnis angezeigt wird. (Erforderlich)
value2 [any] Zweiter Wert, der als Ergebnis angezeigt wird. Standard ist eine leere Zeichenkette (Optional)

Rückgabe

any

Verwendung

{{ifx true 'Foo' 'Bar'}}        => Foo  // return (true) ? 'Foo' : 'Bar'
{{ifx false 'Foo' 'Bar'}}       => Foo  // return (false) ? 'Foo' : 'Bar'
{{ifx (eq value 1) 5 6}}        => 6    // return (value === 1) ? 5 : 6
{{ifx (not (eq value 1)) 5 6}}  => 6    // return (value !== 1) ? 5 : 6

<!-- Der dritte Parameter ist optional, standardmäßig wird eine leere Zeichenkette ('') zurückgegeben -->
{{ifx true 'active'}}  => 'active'
{{ifx false 'active'}}  => ''

{{ifx (eq foo "bar") "Hello" "World"}}

empty

Prüft, ob ein Array leer ist.

Parameter

array [array] Array/Objekt, das geprüft werden soll. (Erforderlich)

Rückgabe

boolean

Verwendung

var array = [5, 6];     // Ein Array.
{{empty array}} => false

{{#if (empty array)}}
  Hello
{{/if}}

count

Ermittelt die Länge eines Arrays. Entspricht dem array.length-Operator in JavaScript.

Parameter

array [array] Array, dessen Elemente gezählt werden sollen. (Erforderlich)

Rückgabe

number|false

Verwendung

var array = [5, 6];    // Ein Array.
{{count array}} =>  2;

and

Gibt das logische AND von zwei oder mehr übergebenen Parametern zurück, d. h. es ist wahr, wenn alle Parameter wahr sind.

Parameter

params [any] Beliebige Anzahl von booleschen Parametern. (Erforderlich)

Rückgabe

boolean

Verwendung

var value1 = value2 = true;
{{and value1 value2}}    => true

var value1 = false, value2 = true;
{{and value1 value2}}    => false

{{#if (and value1 value2)}}
  <!-- etwas tun -->
{{else}}
  <!-- etwas anderes tun -->
{{/if}}

or

Gibt das logische OR von zwei oder mehr übergebenen Parametern zurück, d. h. es ist wahr, wenn einer der Parameter wahr ist.

Parameter

params [any] Beliebige Anzahl von booleschen Parametern. (Erforderlich)

Rückgabe

boolean

Verwendung

var value1 = true, value2 = false;
{{or value1 value2}}    => true

var value = value2 = false;
{{or value1 value2}}    => false

{{#if (or value1 value2)}}
  <!-- etwas tun -->
{{else}}
  <!-- etwas anderes tun -->
{{/if}}

coalesce

Gibt den ersten nicht-falschen Wert aus der Parameterliste zurück. Funktioniert ähnlich wie die SQL-Funktion COALESCE(), prüft jedoch im Gegensatz dazu auf den ersten nicht-false-Parameter.

Parameter

params [any] Beliebige Anzahl von Parametern. (Erforderlich)

Rückgabe

any

Verwendung

var fullName = 'Foo Bar', nickName = 'foob';
{{coalesce fullName nickName 'Unknown'}}    => 'Foo Bar'

var fullName = '', nickName = 'foob';
{{coalesce fullName nickName 'Unknown'}}    => 'foob'

includes

Gibt true zurück, wenn ein Array einen Wert enthält. Standardmäßig wird strikt geprüft (Wert + Datentyp). Durch Übergabe von false als drittem Argument kann nicht-strikt geprüft werden (nur Wert).

Parameter

params [array] Das Array. (Erforderlich)
params [any] Der Wert, dessen Existenz im Array geprüft werden soll. (Erforderlich)
params [boolean] FALSE für nicht-strikte Prüfung. Standardmäßig TRUE. (Optional)

Rückgabe

boolean

Verwendung

var array = [1, 2, 3];
var value = 2;

{{includes array value}}        => true

var value = '2'
{{includes array value}}        => false
{{includes array value true}}   => false
{{includes array value false}}  => true

{{#if (includes array value)}}
  <!-- etwas tun -->
{{/if}}

{{ifx (includes array value) "Yes" "No"}}

String

excerpt

Extrahiert einen Teilstring aus einem String.

Parameter

string [string] Der String, aus dem Zeichen extrahiert werden sollen. (Erforderlich)
length [number | string] Anzahl der zu extrahierenden Zeichen. Standardwert ist 50. (Optional)

Rückgabe

string

Verwendung

{{excerpt 'Just Wow' 4}} => 'Just...'

sanitize

Konvertiert einen String in einen URL-freundlichen Dash-Case-String und entfernt Sonderzeichen.

Parameter

string [string] Der String, der in eine URL konvertiert werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{sanitize 'JuSt #Wow'}} => 'just-wow'

newLineToBr

Ersetzt \n durch <br>-Tags.

Parameter

string [string] Der String, in dem \n durch <br>-Tags ersetzt werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{{newLineToBr 'newLineToBr helper \n is very \n useful.'}}}    => newLineToBr helper <br> is very <br> useful.

capitalizeEach

Schreibt den ersten Buchstaben jedes Wortes in einem String groß.

Parameter

string [string] Der Satz/String, der großgeschrieben werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{capitalizeEach 'just wow'}} => 'Just Wow'

capitalizeFirst

Schreibt den ersten Buchstaben eines Strings groß.

Parameter

string [string] Der Satz/String, der großgeschrieben werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{capitalizeFirst 'just wow'}} => 'Just wow'

sprintf

Der sprintf Helper gibt formatierte Daten als String-Ausgabe zurück.

Parameter

format [string] Die Nachricht/der String, der verschiedene Variablenformate verwendet. (Erforderlich)
args [arbitrary arguments] Beliebige Anzahl von Parametern/Werten. (Erforderlich)

Gibt string zurück

Verwendung

{{sprintf "%s %s!" "Hello" "Kabir"}}                      => 'Hello Kabir!'
{{sprintf "%s %s %d %s %d" "Foo" "Bar" 55 "Baz" "20"}}    => 'Foo Bar 55 Baz 20'

var obj = { greeting: 'Hello', name: 'Mandy' };
{{sprintf "%(greeting)s %(name)s! How are you?" obj}}
{{sprintf "%(greeting)s %(name)s! " greeting="Hello" name="Mandy"}}

lowercase

Wandelt den String in Kleinbuchstaben um.

Parameter

param [string] Der String, der in Kleinbuchstaben umgewandelt werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{lowercase 'JUST WOW!!!'}} => 'just wow!!!'

uppercase

Wandelt den String in Großbuchstaben um.

Parameter

param [string] Der String, der in Großbuchstaben umgewandelt werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{uppercase 'just wow!!!'}} => 'JUST WOW!!!'

first

Gibt das erste Element einer Sammlung/eines Arrays zurück.

Parameter

collection [array] Die Sammlung/das Array von Objekten (Strings, Ganzzahlen). (Erforderlich)

Rückgabe

string

Verwendung

someArray = ['David', 'Miller', 'Jones'];
{{first someArray}} => 'David'

last

Gibt das letzte Element einer Sammlung/eines Arrays zurück.

Parameter

collection [array] Die Sammlung/das Array von Objekten (Strings, Ganzzahlen). (Erforderlich)

Rückgabe

string

Verwendung

someArray = ['David', 'Miller', 'Jones'];
{{last someArray}} => 'Jones'

concat

Verbindet zwei oder mehr Strings.

Parameter

params [arguments] Beliebige Anzahl von Argumenten. (Erforderlich)

Rückgabe

string

Verwendung

{{concat 'Hello' ' world' '!!!'}} => 'Hello world!!!'

join

Verbindet die Elemente eines Arrays mit einem Trennzeichen.

Parameter

array [array] Ein Array von Elementen, die verbunden werden sollen. (Erforderlich)
delimeter [string] Das Trennzeichen, mit dem die Array-Elemente verbunden werden. (Erforderlich)

Rückgabe

string

Verwendung

someArray = ['Hands', 'legs', 'feet'];
{{join someArray ' & '}}   => 'Hands & legs & feet'

substring

Extrahiert einen Teilstring aus einem String.

Parameter

string [string] Der String, aus dem Zeichen extrahiert werden sollen. (Erforderlich)
start [number | string] Die Position, ab der die Extraktion beginnt. (Erforderlich)
end [number | string] Die Position, an der die Extraktion endet. (Optional)

Rückgabe

string

Verwendung

{{substring 'Just Wow' 4 7}}      => 'Wow'
{{substring 'Hello World' -5}}    => 'World'

Mathematik

sum

Ein sum Helper zur Berechnung der Summe zweier Zahlen.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{sum 1 2}}     => 3
{{sum 5.6 6.7}} => 12.3

difference

Ein difference Helper zur Berechnung der Differenz zweier Zahlen.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{difference 5 2}}      => 3
{{difference 7.2 3.4}}  => 3.8

multiplication

Ein multiplication Helper zur Berechnung der Multiplikation zweier Zahlen.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{multiplication 5 2}}      => 10
{{multiplication 5.2 6.4}}  => 33.28

division

Ein division Helper zur Berechnung der Division zweier Zahlen.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{division 4 2}}      => 2
{{division 5.2 1.6}}  => 3.25

remainder

Ein remainder Helper zur Berechnung des Rests zweier Zahlen.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{remainder 5 3}}      => 2
{{remainder 5.2 2.5}}  => 0.20000000000000018

modulo

Ein modulo Helper zur Berechnung des Modulos zweier Zahlen. Dies ist ein Alias für den remainder Helper und verwendet den gebräuchlicheren mathematischen Begriff für die Modulo-Operation.

Parameter

value1 [number | string] Erste Zahl. (Erforderlich)
value2 [number | string] Zweite Zahl. (Erforderlich)

Rückgabe

number

Verwendung

{{modulo 5 2}}      => 1
{{modulo 10 3}}     => 1
{{modulo 17 5}}     => 2

<!-- Prüfen, ob eine Zahl gerade ist -->
{{#if (eq (modulo number 2) 0)}}
  Even number
{{else}}
  Odd number
{{/if}}

<!-- Stil auf jedes 3. Element anwenden -->
{{#each items}}
  <div class="{{#if (eq (modulo @index 3) 0)}}highlighted{{/if}}">
    {{this}}
  </div>
{{/each}}

ceil

Ein ceil Helper zum Aufrunden einer Zahl auf die nächste ganze Zahl. Entspricht Math.ceil() in JavaScript.

Parameter

value [number | string] Zahl, die auf die nächste größere ganze Zahl gerundet werden soll. (Erforderlich)

Rückgabe

integer

Verwendung

{{ceil 5.6}}    => 6

floor

Ein floor Helper zum Abrunden einer Zahl auf die nächste ganze Zahl. Entspricht Math.floor() in JavaScript.

Parameter

value [number | string] Zahl, die auf die nächste kleinere ganze Zahl gerundet werden soll. (Erforderlich)

Rückgabe

integer

Verwendung

{{floor 5.6}}   => 5

abs

Ein abs Helper zum Ermitteln des Absolutwerts einer Zahl. Entspricht Math.abs() in JavaScript.

Parameter

value [number | string] Zahl, für die der Absolutwert berechnet werden soll. (Erforderlich)

Rückgabe

number

Verwendung

{{abs -5.6}}   => 5.6

random

Der random Helper erzeugt eine Zufallszahl zwischen min und max. Möglich als Ganzzahl oder als Gleitkommazahl mit maximal 2 Dezimalstellen.

Parameter

min [number] Standard ist 1. Minimalwert (inklusive) (Optional)
max [number] Standard ist 100. Maximalwert (inklusive) (Optional)
type [string] 'int' für Ganzzahl, 'float' für Gleitkommazahl (max. 2 Dezimalstellen). Standard ist Ganzzahl (Optional)

Rückgabe

number

Verwendung

{{random}}                => Ganzzahl zwischen 1 und 100
{{random 5 10}}           => Ganzzahl zwischen 5 und 10
{{random 1 10 'float'}}   => Gleitkommazahl zwischen 1 und 10, max. 2 Dezimalstellen

Datum/Zeit

formatDate

Ein formatDate Helper zur Formatierung von Datum mit der toFormat-Funktion und Formatting Tokens von Luxon.

tipp

Verwenden Sie besser den datetime Helper für vielseitigere Datum-/Zeit-Funktionalitäten.

Um mehr über die Formatting Tokens zu erfahren, besuchen Sie den Abschnitt Luxon "Table of tokens".
https://moment.github.io/luxon/#/formatting?id=table-of-tokens

Weitere Informationen zur Luxon "toFormat"-Funktion finden Sie hier.
https://moment.github.io/luxon/#/formatting?id=toformat

Parameter

formatString [string] Format-String basierend auf der Luxon "toFormat"-Funktion (Erforderlich)
date [date] Das Datum/Datum-Zeit, das mit dem Eingabeformat "yyyy-MM-dd" formatiert werden soll (Optional)
localeString [string] ISO 3166-1 Locale-Code gemäß https://en.wikipedia.org/wiki/ISO_3166-1#Codes (Optional)

Rückgabe

string

Verwendung

{{formatDate 'yyyy-MM-dd' date}}                       => 2024-06-24 (unter Verwendung des aktuellen Datums)
{{formatDate 'MM/dd/yyyy' '2016-01-22'}}               => 01/22/2016
{{formatDate 'MMMM dd, yyyy GG' '2016-01-22' 'en'}}    => 'January 22, 2016 Anno Domini'

hinweis

Die Datumsformatierungsparameter basieren teilweise auf Luxon (moment.github.io/luxon).

datetime

Der datetime Helper ist ein vielseitiger Handlebars Helper zur Manipulation und Formatierung von Datum und Uhrzeit. Er verwendet verschiedene Initialisierungsmethoden, Modifikationsoperationen und Finalisierungsoptionen, um eine breite Palette von Datum-/Zeit-Funktionalitäten bereitzustellen.

Parameter

Initialisierung: Sie können das Datum mit verschiedenen Methoden initialisieren.
- from_var: Initialisiert aus einem JavaScript-Datumsobjekt-String.
- from_timestamp: Initialisiert aus einem Zeitstempel in Millisekunden.
- from_millis: Initialisiert aus einem Zeitstempel in Millisekunden.
- from_rfc2822: Initialisiert aus einem RFC2822-formatierten String.
- from_iso: Initialisiert aus einem ISO-formatierten String.
- from_str: Initialisiert aus einem benutzerdefinierten formatierten String mit input_format.
- Keine Parameter: Verwendet das aktuelle Datum und die aktuelle Uhrzeit.
Modifikation: Sie können das initialisierte Datum mit den folgenden Optionen ändern.
- with_year: Setzt das Jahr.
- with_month: Setzt den Monat.
- with_day: Setzt den Tag.
- with_hour: Setzt die Stunde.
- with_minute: Setzt die Minute.
- with_second: Setzt die Sekunde.
- add_years: Addiert die angegebene Anzahl von Jahren.
- add_months: Addiert die angegebene Anzahl von Monaten.
- add_weeks: Addiert die angegebene Anzahl von Wochen.
- add_days: Addiert die angegebene Anzahl von Tagen.
- add_hours: Addiert die angegebene Anzahl von Stunden.
- add_minutes: Addiert die angegebene Anzahl von Minuten.
- add_seconds: Addiert die angegebene Anzahl von Sekunden.
- sub_years: Subtrahiert die angegebene Anzahl von Jahren.
- sub_months: Subtrahiert die angegebene Anzahl von Monaten.
- sub_weeks: Subtrahiert die angegebene Anzahl von Wochen.
- sub_days: Subtrahiert die angegebene Anzahl von Tagen.
- sub_hours: Subtrahiert die angegebene Anzahl von Stunden.
- sub_minutes: Subtrahiert die angegebene Anzahl von Minuten.
- sub_seconds: Subtrahiert die angegebene Anzahl von Sekunden.
Zeitzone & Locale: Sie können die Zeitzone und das Locale angeben.
- with_timezone: Setzt die Zeitzone.
- with_locale: Setzt das Locale.
Finalisierung: Sie können das Datum mit verschiedenen Formatierungs- und Konvertierungsoptionen finalisieren.
- to_rfc2822: Konvertiert in das RFC2822-Format.
- to_isodate: Konvertiert in das ISO-Datumsformat (yyyy-MM-dd).
- to_isotime: Konvertiert in das ISO-Zeitformat (HH:mm:ss.SSSZ).
- to_timestamp: Konvertiert in einen Unix-Zeitstempel in Millisekunden.
- to_seconds: Konvertiert in einen Unix-Zeitstempel in Sekunden.
- to_utc: Konvertiert in einen UTC-Zeitstempel in Millisekunden.
- to_localestring: Konvertiert in ein Locale-String-Format. Optional können Sie das Locale-Format angeben.
- to_relative: Konvertiert in ein relatives Zeitformat.
- to_relative_units: Konvertiert in ein relatives Zeitformat mit angegebenen Einheiten.
- to_relative_calendar: Konvertiert in ein relatives Kalenderformat.

Rückgabe

string

Verwendung

{{datetime from_var="Fri May 19 2021 10:00:00 GMT+0200"}}                    => "2021-05-19T10:00:00.000+02:00"
{{datetime from_timestamp="1621411200000"}}                                  => "2021-05-19T10:00:00.000+02:00"
{{datetime from_iso="2021-05-19"}}                                           => "2021-05-19T00:00:00.000+02:00"
{{datetime from_str="2021-05-19" input_format="yyyy-MM-dd"}}                 => "2021-05-19T00:00:00.000+02:00"
{{datetime add_days="2"}}                                                    => "2021-05-21T00:00:00.000+02:00"
{{datetime with_timezone="America/New_York"}}                                => "2021-05-18T18:00:00.000-04:00"
{{datetime to_rfc2822=true}}                                                 => "Wed, 19 May 2021 08:00:00 +0000"
{{datetime to_localestring=true with_locale="en-us"}}                        => "5/19/2021"
{{datetime to_relative=true from_str="2011-02-03" input_format="yyyy-MM-dd" with_locale="fr"}} => "il y a 10 ans"

HTML

showIf

Ein showIf Helper zum Anzeigen eines beliebigen HTML-Elements.

Parameter

expression [boolean] Bedingung, die geprüft werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{showIf true}}     => ''
{{showIf false}}    => 'hidden'

hideIf

Ein hideIf Helper zum Verstecken eines beliebigen HTML-Elements.

Parameter

expression [boolean] Bedingung, die geprüft werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{hideIf true}}     => 'hidden'
{{hideIf false}}    => ''

selectedIf

Ein selectedIf Helper für Dropdown- und Radio-Boxen.

Parameter

expression [boolean] Bedingung, die geprüft werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{selectedIf true}}     => 'selected'

checkedIf

Ein checkedIf Helper für Checkboxen.

Parameter

expression [boolean] Bedingung, die geprüft werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{checkedIf true}}      => 'checked'

options

Ein options Helper zum Erzeugen einer <option>-Liste für <select>-Dropdowns.

Parameter

data [array] Liste von Daten (Erforderlich)
id [string] Name des Identifikationsschlüssels aus der Datenliste, Standard ist id (Optional)
text [string] Name des Beschreibungsschlüssels aus der Datenliste, Standard ist description (Optional)
selected [string] ID, die als ausgewählt gesetzt werden soll (Optional)

Rückgabe

string | HTML

Verwendung

{{{options data}}}
{{{options data selected="value"}}}
{{{options data id="id" text="description"}}}

Ein einfaches Beispiel:

const data = [
    {
        id: 1,
        description: 'Foo'
    },
    {
        id: 2,
        description: 'Bar'
    },
    {
        id: 3,
        description: 'Foo Bar'
    }
];

{{{options data selected="2"}}}

erzeugt folgenden HTML-Code:

<option value="1">Foo</option>
<option value="2" selected>Bar</option>
<option value="3">Foo Bar</option>

Sie können auch die Standard-Schlüsselnamen für id & description mithilfe der id- & text-Optionen im Helper überschreiben.

const data = [
    {
        value: 1,
        text: 'New York'
    },
    {
        value: 2,
        text: 'London'
    }
];

{{{options data selected="1" id="value" text="text"}}}

erzeugt folgenden HTML-Code:

<option value="1" selected>New York</option>
<option value="2">London</option>

Formatierung

formatCurrency

Formatiert einen Währungswert nach Ländercode und Locale.

Parameter

value [number] Der numerische Wert der Währung. (Erforderlich)
args [arbitrary arguments] Die Währungsformatierungsparameter. (Optional)

Rückgabe

string

Verwendung

{{formatCurrency 1234567.86 code='INR'}}                                                                  => ₹ 12,34,567.86
{{formatCurrency 1234567.86 code='EUR' locale='fr'}}                                                      => 1 234 567,86 €
{{formatCurrency 1234567.86 code='USD' decimal=',' group='.' symbol='&dollar; (USD)' pattern="#.# !"}}    => 1234567,9 $ (USD)

hinweis

Die Währungsformatierungsparameter stammen von CurrencyFormatter.js (osrec.github.io/currencyFormatter.js).

Hilfsmittel

json

Der json Helper konvertiert die gegebenen Daten in einen JSON-String oder parst einen JSON-String in ein Objekt.

Parameter

data: Die Daten, die in einen JSON-String konvertiert werden sollen.
parse: Wenn true, wird der JSON-String in ein Objekt geparst.
pretty: Wenn true, wird der JSON-String mit Leerzeichen und Zeilenumbrüchen formatiert.

Rückgabe

string

Verwendung

{{json data}}                => '{"name":"John","age":30}'
{{json data parse=true}}     => { name: 'John', age: 30 }
{{json data pretty=true}}    => '{
                                   "name": "John",
                                   "age": 30
                                 }'

var data = { name: 'John', age: 30 };
{{json data}}

slice

Der slice Helper gibt einen Ausschnitt des gegebenen Arrays zurück.

Parameter

data: Das Array, aus dem der Ausschnitt entnommen werden soll.
start: Der Index, ab dem der Ausschnitt beginnt.
end: Der Index, an dem der Ausschnitt endet.

Rückgabe

array | string

Verwendung

var someArray = ['David', 'Miller', 'Jones'];
{{slice someArray 1}}      => ['Miller', 'Jones']
{{slice someArray 0 1}}    => 'David'

encode

Der encode Helper konvertiert den gegebenen String in einen URI-kodierten String.

Parameter

data: Der String, der URI-kodiert werden soll.

Rückgabe

string

Verwendung

{{encode data}}    => 'Hello%20World%21'

{{encode "Hello World!"}}

staffbaseIdToken

Der staffbaseIdToken Helper gibt das Staffbase ID Token als String zurück.

Parameter

Keine

Rückgabe

string

Verwendung

{{staffbaseIdToken}}    => "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."

<div data-token="{{staffbaseIdToken}}"></div>

staffbaseAccessToken

Der staffbaseAccessToken Helper gibt das Staffbase Access Token als String zurück.

Parameter

Keine

Rückgabe

string

Verwendung

{{staffbaseAccessToken}}    => "ory_ae4b742ea3..."

<div data-token="{{staffbaseAccessToken}}"></div>

decode_jwt

Der decode_jwt Helper dekodiert ein JSON Web Token (JWT) und gibt dessen Payload als Objekt zurück.

Parameter

token [string] Das zu dekodierende JWT Token. (Erforderlich)

Rückgabe

object

Verwendung

{{decode_jwt "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}}
=> { sub: "1234567890", name: "John Doe", iat: 1516239022 }

{{#with (decode_jwt staffbaseIdToken)}}
  <div>User ID: {{sub}}</div>
  <div>User Name: {{name}}</div>
  <div>Issued At: {{iat}}</div>
{{/with}}

extract_jwt

Der extract_jwt Helper extrahiert ein bestimmtes Attribut aus einem dekodierten JWT Token.

Parameter

token [string] Das JWT Token, aus dem Daten extrahiert werden sollen. (Erforderlich)
attribute [string] Der Name des Attributs, das aus dem Token extrahiert werden soll. (Erforderlich)

Rückgabe

string

Verwendung

{{extract_jwt "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." "name"}}    => "John Doe"

<div>User ID: {{extract_jwt staffbaseIdToken "sub"}}</div>

Verfügbare Handlebars​

Bedingt​

eq​

Parameter​

Rückgabe​

Verwendung​

eqw​

Parameter​

Rückgabe​

Verwendung​

neq​

Parameter​

Rückgabe​

Verwendung​

neqw​

Parameter​

Rückgabe​

Verwendung​

lt​

Parameter​

Rückgabe​

Verwendung​

lte​

Parameter​

Rückgabe​

Verwendung​

gt​

Parameter​

Rückgabe​

Verwendung​

gte​

Parameter​

Rückgabe​

Verwendung​

not​

Parameter​

Rückgabe​

Verwendung​

ifx​

Parameter​

Rückgabe​

Verwendung​

empty​

Parameter​

Rückgabe​

Verwendung​

count​

Parameter​

Rückgabe​

Verwendung​

and​

Parameter​

Rückgabe​

Verwendung​

or​

Parameter​

Rückgabe​

Verwendung​

coalesce​

Parameter​

Rückgabe​

Verwendung​

includes​

Parameter​

Rückgabe​

Verwendung​

String​

excerpt​

Parameter​

Rückgabe​

Verwendung​

sanitize​

Parameter​

Rückgabe​

Verwendung​

newLineToBr​

Parameter​

Rückgabe​

Verwendung​

capitalizeEach​

Verfügbare Handlebars

Bedingt

eq

Parameter

Rückgabe

Verwendung

eqw

Parameter

Rückgabe

Verwendung

neq

Parameter

Rückgabe

Verwendung

neqw

Parameter

Rückgabe

Verwendung

lt

Parameter

Rückgabe

Verwendung

lte

Parameter

Rückgabe

Verwendung

gt

Parameter

Rückgabe

Verwendung

gte

Parameter

Rückgabe

Verwendung

not

Parameter

Rückgabe

Verwendung

ifx

Parameter

Rückgabe

Verwendung

empty

Parameter

Rückgabe

Verwendung

count

Parameter

Rückgabe

Verwendung

and

Parameter

Rückgabe

Verwendung

or

Parameter

Rückgabe

Verwendung

coalesce

Parameter

Rückgabe

Verwendung

includes

Parameter

Rückgabe

Verwendung

String

excerpt

Parameter

Rückgabe

Verwendung

sanitize

Parameter

Rückgabe

Verwendung

newLineToBr

Parameter

Rückgabe

Verwendung

capitalizeEach