In this tutorial, we explain the concepts of data binding in OpenUI5.
Data binding is used to bind UI elements to data sources. This keeps the data in sync and allows data editing on the UI.
For data binding, you need a model and a binding instance: The model holds the data and provides methods to set the data or retrieve it from a server. It also provides a method for creating bindings to the data. When you call this method, a binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data changes. An element can listen to this event and update its visualization according to the new data.
The UI uses data binding to bind controls to the model which holds the application data, so that the controls are updated automatically whenever application data changes. Data binding is also used in reverse, when changes in the control, for example data entered by the user, cause updates in the underlying application data. This is called two-way binding.
You don't have to do all tutorial steps in order; you can jump directly to any step you want. Just download the code from the previous step, copy it to your workspace, and ensure that the application runs by calling the
webapp/index.htmlfile.You can view and download the files for all steps in the Demo Kit at Data Binding. Depending on your development environment you might need to adjust resource paths and configuration entries.
For more information check the Downloading Code for a Tutorial Step section of the tutorials overview page Get Started: Setup, Tutorials, and Demo Apps.
Related Information