Element Binding

Element binding allows to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children. This is especially helpful in master/detail scenarios.

Binding an element allows to set the binding context of the element to the object referenced by the given binding path. Thus, all relative bindings within the control and all of its children are resolved relative to this object. For server-side models, the element binding triggers the request to the server to load the referenced object in case it is not yet available on the client.

Element bindings can also be defined relatively. In case of relative element bindings, the binding context is updated when the parent binding context is changed.

To define an element binding, use the bindElement method on a control:

oControl.bindElement("/company");
oControl.bindProperty("value", "name");

Element binding is especially interesting for containers or layouts containing many controls that are all visualizing properties of the same model object.

var oMatrixLayout = new sap.ui.commons.layout.MatrixLayout();
oMatrixLayout.bindElement("/company");
oMatrixLayout.createRow(
	new sap.ui.commons.Label({text: "Name:"}),
	new sap.ui.commons.TextField({value: "{name}"})
);

oMatrixLayout.createRow(
	new sap.ui.commons.Label({text: "Revenue:"}),
	new sap.ui.commons.TextField({value: "{revenue}"})
);
oMatrixLayout.createRow(
	new sap.ui.commons.Label({text: "Employees:"}),
	new sap.ui.commons.TextField({value: "{employees}"})
);

Setting a New Context for the Binding (Master Detail)

You create a new binding context for an element that is used to resolve bound properties or aggregations relative to the given path. You can use this method if the existing binding path changes or has not been provided before, for example in master detail scenarios.

Below is a simple example:

var data = {clients:[{firstName:"Donald", lastName:"Duck"}]};
...// create and set model here
var oLabel = new sap.ui.commons.Label("myLabel");
oLabel.bindProperty("text", "firstName");
oLabel.bindElement("/clients/0");

The bindProperty method binds the text value of the label to the firstName property in the model. As the path to this property in the model is not set, this will not resolve. To resolve the binding, you use the bindElement method which creates a new context from the specified relative path.

To remove the current binding context, call the unbindElement method on the label. By this, all bindings now resolve relative to the parent context again.

You can also use the bindElement method in conjunction with aggregation binding:

var data = {clients:[
                      {firstName:"Donald", lastName:"Duck"},
                         items: [ {name: "iPhone"}, {name:"iPad"} ]
                      }
           ]};
...// create and set model here
var oLB = new sap.ui.commons.ListBox("myLb", {height:"100px"});
var oItemTemplate = new sap.ui.core.ListItem();	                          
oItemTemplate.bindProperty("text", "name");
oLB.bindAggregation("items", "items", oItemTemplate);
oLB.bindElement("/clients/0");

In this example, the ListBox is used to display the detailed data (items data) for a specified client. Another control can now be used to show the master data (client data) in the same way as in the first example with the label.

This example only works if the additional detailed data in the model which should be displayed in the ListBox (items in the example) is nested in the corresponding parent data (the client in the example). As you can see in the model, the items are contained in the client data.

You can also use a filtering function, for example in a table, to display detailed data for selected master data. In this case, nested data is not necessary in the model.