SAPUI5 Data Binding – Binding Modes und Binding Types
Binding Modes und Binding Types bei SAPUI5? Was soll das eigentlich sein? In Vorbereitung auf die C_FIORDEV_21-Zertifizierung habe ich mir dazu eine Übersicht erstellt und möchte diese hier mit Ihnen teilen.
Die Begriffe
Binding Mode
Der Binding Mode legt fest, wie die Daten aus dem Model an die View gebunden werden und bei welchen Aktionen die Daten aktualisiert werden können. Hier werden Sie auf die Begriffe „One Way“, „Two Way“ und „One Time“ stoßen. Der Binding Mode wird üblicherweise pro Model festgelegt und nur für einzelne Controls übersteuert.
Binding Type
Der Binding Type legt fest, welche Daten beim Binding an welche Eigenschaft des Controls gebunden werden. Hier werden Sie wiederum auf die Begriffe „Property Binding“, „Expression Binding“, „Context/Element Binding“ und „Aggregation Binding“ stoßen. Der Binding Type wird pro Binding an ein Control festgelegt.
Was unterscheidet die unterschiedlichen Binding Modes?
One Way Binding
Die Daten aus dem Model werden an die View gebunden. Updaten Sie die Daten im Model, wird die View entsprechend ebenfalls aktualisiert.
Two Way Binding
Die Daten aus dem Model werden an die View gebunden. Außerdem wird auch die View ans Model gebunden, so dass Aktualisierungen von Daten im Model die View aktualisieren, während bei der Aktualisierung von Daten im View das Model aktualisiert wird.
One Time
Beim One Time Binding werden die Daten einmalig aus dem Model an die View gebunden. Aktualisierungen in der View haben keinerlei Auswirkungen auf das Model und umgekehrt.
Für unterschiedliche Anwendungsfälle benötigen Sie die unterschiedlichen Binding Modes. Ein klassisches Beispiel für das OneTime Binding ist das Resource Model, da hier mit statischen Texten gearbeitet wird. Die unterschiedlichen Models unterstützen die Binding Modes wie folgt:
UI5 Binding Modes
Was unterscheidet die unterschiedlichen Binding Types?
Property Binding
Beim Property Binding wird eine Eigenschaft eines Controls durch das Binding befüllt und gegebenenfalls geupdatet (je nach Binding Mode). Ein einfaches Beispiel wäre also die Anzeige der Anzahl eines Urlaubskontingents auf Basis der Daten aus dem Model. Es besteht außerdem die Möglichkeit, Formatter zu verwenden. So beispielsweise dann, wenn die Daten zwar im Model stehen, aber für die Anzeige anders formatiert werden sollen, als sie im Model stehen. Die Syntax für unterschiedliche Models können Sie hier nachlesen.
Für komplexere Bindings können Sie das Expression Binding verwenden. Dies bietet Ihnen die Möglichkeit, ohne separates JavaScript Coding (Formatter) viele Anwendungsfälle in XML abzufangen. Ein Beispiel wäre das Ein- oder Ausblenden eines Controls, wenn ein Wert im Model einen bestimmten Wert hat. Eine sehr gute Erklärung der SAP mit der zur Verfügung stehenden Syntax finden Sie hier.
Context/ Element Binding
Beim Element Binding wird ein Element aus dem Model an ein Control gebunden. Haben wir beim Property Binding also beispielsweise die Anzahl eines Urlaubskontingentes verwendet, so können wir mit dem Element Binding das ganze Objekt des Kontingents mit allen zugehörigen Werten an ein Control binden. Daher wird diese Art des Bindings häufig in Master Detail Applikationen verwendet, um die Detailinformationen einen bestimmten Elements anzuzeigen. Die zugehörige Syntax mit Beispielen finden Sie hier.
Aggregation Binding
Aggregation Binding können Sie, wie der Name verrät, verwenden, um eine Aggregation zu binden. Leicht verständlich wird dies beispielsweise bei dem folgenden Anwendungsfall: Sie haben im Model eine Liste verschiedener Kontingente mit der entsprechender Anzahl, Texten etc. Um diese Liste jetzt anzuzeigen, können Sie ein Aggregation Binding an die Aggregation „items“ einer Tabelle in der View binden. Daraufhin werden entsprechende Zeilen der Tabelle für jedes Element generiert, die an den entsprechenden Eintrag aus dem Model gebunden sind. Weitere Informationen finden Sie hier.
Fiori-Info Plugin
Sie möchten Informationen für Ihre Mitarbeiter direkt im Fiori-Launchpad zugreifbar machen? Unser Fiori-Info Plugin bietet Ihnen genau diese Möglichkeit.
Weitere Fragen?
Wenn bei Ihnen Fragen offen geblieben sind oder Sie Interesse an einer Schulung zum Thema UI5 mit diesen und weiteren Themen haben, melden Sie sich gerne!
Erfahren Sie hier mehr zu der C_FIORDEV_21-Zertifizierung.
