Binding modes & types in SAP UI5

SAPUI5 is based on Java script framework and uses MVC architecture where in MVC depicts Model, View and Controller.

Model holds application data.
View is used to define and render UI.
Controller changes model and view based on user interaction.

Data Binding: Data binding is used to keep the control in sync with data source.

In order to achieve data binding we need model and binding instance.A model instance holds application data and various methods to set data or retrieve data from the server. It also contains methods to create bindings, on calling this method a binding instance gets created which contains
binding information and an event which gets triggered whenever change in the application data occurs.

There three binding modes in SAPUI5:

• One way binding – Data flows from model to control. Change in the model data updates all the corresponding bindings.
• Two way binding – Data flows from model to view and view to model. Change in the control results in the change in application data
• One time binding – Data flows from model to view once. Typically used for static texts, for example i18n texts.

There are different binding types in SAPUI5.

• Property binding.
• Context/Element binding.
• Aggregation/List binding.

Building a JSON object, creating a model instance and setting the model to the view:

	var personalInfoJson = [{
				"Name": "Jacob",
				"Tel": "+121212121212",
				"Email": "Jacob@hotmail.com",
				"address": {
					"street": "700 Oak Street",
					"city": "Brockton",
					"country": "US"
				}
			},{
				"Name": "Mathew",
				"Tel": "+121212121222",
				"Email": "Mathew@hotmail.com",
				"address": {
					"street": "591 Memorial Dr",
					"city": "Chicopee",
					"country": "US"
				}
			}];
		
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.setData(personalInfoJson);
			this.getView().setModel(oModel);
			this.byId("employeeTable").setModel(oModel, "Items");

Property binding: Enables to bind to the property of a control.

	<Text text="{/0/Name}"/>

Context / Element binding: Enables to bind the control to an object in the model, creating a binding context. Thus allowing relative binding within the control and it’s children.

	<l:VerticalLayout id="vLayout" binding="{/0/address}" width="100%">
							<Text text="{street}"/>
							<Text text="{city}"/>
							<Text text="{country}"/>
						</l:VerticalLayout>

Aggregation/List binding: Child controls are created based on model data.

	<List id="employeeTable" headerText="Employee Details" items="{Items>/}">
							<ObjectListItem title="{Items>Name}"/> 
						</List>

Hope it’s useful.

Thank you,

Sri Divya. 🙂