XTemplate Syntax in ExtJS-Einstellungen

XTemplates in ExtJS-Einstellungen ermöglichen es, dynamische Inhalte mithilfe von Platzhaltern und einfachen Ausdrücken zu erstellen. Diese Platzhalter beziehen sich auf zugrundeliegende Daten und werden zur Laufzeit durch tatsächliche Werte ersetzt, abhängig vom jeweiligen Kontext.

Grundprinzip

XTemplates arbeiten mit einem Datenkontext, der die Werte für die Platzhalter bereitstellt.
Platzhalter in geschweiften Klammern {} referenzieren Felder oder Eigenschaften dieser Daten.
Zur Laufzeit werden die Platzhalter durch die entsprechenden Werte aus dem Datenkontext ersetzt.

Datenkontext

Der Datenkontext kann verschiedene Quellen haben:

Eigenschaften des globalen ViewModels
Benutzerdefinierte JavaScript-Objekte

Grundlegende Syntax

{feldName}: Zeigt den Wert eines Feldes an
{[JavaScript-Ausdruck]}: Führt einen einfachen JavaScript-Ausdruck aus

Beispiel

Hier ein einfaches Beispiel für einen XTemplate-String, wie es im :

{
  "Benutzername": "Max",
  "Vorname": "Maximilian",
  "Nachname": "Mustermann"
}

Hallo {Vorname} {Nachname}!
Heute ist der {[Ext.Date.format(new Date(), 'd.m.Y')]}.

In diesem Beispiel wird ` {Vorname} {NachnNachnameame}` durch die tatsächlichen Namen ersetzt, und das aktuelle Datum wird im Format TT.MM.JJJJ angezeigt.

Das XTemplate benötigt immer ein passendes Datenobjekt, das die im Template verwendeten Eigenschaften enthält. Fehlt eine referenzierte Eigenschaft im Datenobjekt, wird sie als leerer String dargestellt.

Kontextabhängige Werte

Je nach Einstellung können unterschiedliche Werte verfügbar sein. Häufig wird auf das globale ViewModel zugegriffen, das anwendungsweite Daten bereitstellt.

Beispiel mit globalem ViewModel, wie es im User Account Menu verwendet werden könnte.

Willkommen zurück, {global.userSession.loginName}!

Für weitere Informationen zur Verwendung des globalen ViewModels, siehe die Dokumentation zum globalen ViewModel.

Weiterführende Informationen

Für fortgeschrittene Verwendung, einschließlich Schleifen und Bedingungen, konsultieren Sie bitte die offizielle ExtJS-Dokumentation zu XTemplate.