The last of the three binding types to be discussed is element binding.
Element binding plays a role especially in list-detail scenarios. Therefore, a corresponding example will be discussed here.
In the previous lesson on aggregation binding, the elements of an array named Customers were displayed on a view via a Table UI element. For the element binding, the JSON model data is extended: each customer in the Customers array gets an additional property _Bookings. This property is an array and contains the bookings belonging to the customer (see the figure Example Scenario).
Via a second table on the UI, the bookings belonging to a customer are to be displayed, that is, as soon as the user selects an entry in the customer table, the corresponding bookings should appear in the booking table. This behavior is implemented via element binding.
The items aggregation of the booking table is bound to the _Bookings property via the items="{_Bookings}" attribute (see the figure Providing the Binding Context). Since a relative path is used for the binding, the bookings table cannot display any data yet because the binding context for this relative path is missing.
The missing binding context is provided by the onCustomerChange event handler. This event handler is registered on the selectionChange event of the customer table, that is, the event handler is called every time the user selects a new customer in the customer table. They can do this via a radio button that is displayed on the left side in the customer table (mode="SingleSelectLeft").
In the event handler implementation, the listItem event parameter is queried from the oEvent event object. The parameter provides the column list item for the customer that the user has selected. For this list item belonging to the selected customer, the associated binding context is retrieved via the getBindingContext method.
The requested binding context is set for the booking table, which is accessed in the event handler via its Id. Thus, the relative path _Bookings can now be resolved to an absolute path (/Customers/0/_Bookings or /Customers/1/_Bookings) and the bookings belonging to the selected customer are displayed in the table.