What is Element binding of SAP UI5

Element binding allows us to bind an element to a specific object in the model data, which creates a binding context and allows relative binding in the control and all its children. This is especially useful in master-detail scenarios.

Suppose we have the following JSON data:

{
    "company" : {
        "name"  : "Acme Inc."
        "street": "23 Franklin St." 
        "city"  : "Claremont”
        "state" : "New Hampshire”
        "zip”    : "03301"
        "revenue": "1833990"
    }
}

Syntax of element binding:

<mvc:View
    controllerName="sap.ui.sample.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Input id="companyInput"
        binding="{/company}"
        value="{name}"
        tooltip="The name of the company is '{name}'"/>    
</mvc:View>

where this code actually defines the binding context:

binding="{/company}"

In this way, the value attribute can be directly bound to the relative path field such as name in the json model company.

If element binding is not used, we need to use an absolute path as the binding path, that is, use the absolute path syntax starting with the symbol /:

<mvc:View
    controllerName="sap.ui.sample.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Input id="companyInput"
        value="{/company/name}"
        tooltip="The name of the company is '{/company/name}'}"/>    
</mvc:View>

JavaScript code implements element binding:

var oInput = this.byId("companyInput")
oInput.bindElement("/company");
oInput.bindProperty("value", "name");

Application of element binding

Element binding is especially useful when the data sources of different fields of a UI interface logically come from the same level of the same data model:

<mvc:View
    controllerName="sap.ui.sample.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <l:VerticalLayout id="vLayout"
        binding="{/company}"
        width="100%">
            <Text text="{name}" />
            <Text text="{city}" />
            <Text text="{county}" />
    </l:VerticalLayout> 
</mvc:View>

How to create a new binding context

As an example, we have the following json file:

{
    companies : [
        {
            name : "Acme Inc.",
            city: "Belmont",
            state: "NH",
            county: "Belknap",
            revenue : 123214125.34  
        },{
            name : "Beam Hdg.",
            city: "Hancock",
            state: "NH",
            county: "Belknap"
            revenue : 3235235235.23  
        },{
            name : "Carot Ltd.",
            city: "Cheshire",
            state: "NH",
            county: "Sullivan",
            revenue : "Not Disclosed"  
        }]
}

There is such an input field:

<mvc:View
    controllerName="sap.ui.sample.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Input id="companyInput"
         value="{name}"/>    
</mvc:View>

How to set the binding context:

var oInput = this.byId("companyInput");
oInput.bindElement("/companies/0");

The XML view has bound the input value to the name attribute in the model. Since the path to this property in the model is not set, resolve cannot be resolved. To resolve the binding, you can use the bindElement method to create a new context from the specified relative path.

To remove the current binding context, call the unbindElement method on the input control. By doing this, all bindings are now resolved again relative to the parent context.

You can also use the bindElement method with aggregate binding. Let's consider the following extension of JSON data:

{
    regions: [
        {
            name: "Americas",
            companies : [
            {
                name : "Acme Inc.",
                zip : "03301",
                city: "Belmont",
                county: "Belknap",
                state: "NH",
                revenue : 123214125.34, 
                publ: true
            },
            {
                name : "Beam Hdg.",
                zip : "03451",
                city: "Hancock",
                county: "Sullivan",
                state: "NH",
                revenue : 3235235235.23,
                publ: true
            },
            {
                name : "Carot Ltd.",
                zip : "03251",
                city: "Cheshire",
                county: "Sullivan",
                state: "NH",
                revenue : "Not Disclosed",
                publ: false 
            }]
        },{
            name: "DACH",
            companies : [
            {
                name : "Taubtrueb",
                zip : "89234",
                city: "Ginst",
                county: "Musenhain",
                state: "NRW",
                revenue : 2525, 
                publ: true
            },
            {
                name : "Krawehl",
                zip : "45362",
                city: "Schlonz",
                county: "Humpf",
                state: "BW",
                revenue : 2342525, 
                publ: true
            }]
        }
    ] 
}

As shown in the json file above, regions contains a list of companies.

<mvc:View
    controllerName="sap.ui.sample.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
      <List id=”companyList” items="{companies}">
        <items>
            <StandardListItem
         title="{name}"
         description="{city}"
            />
         </items>
      </List>
</mvc:View>

The following line cannot be parsed directly because it is a relative path.

items="{companies}"

We need to use element binding in the controller:

var oList = this.byId("companyList");
oList.bindElement("/regions/0");

In this way, the first element in the regions array, America, contains all the companies will be displayed correctly.