“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Element binding allows us to bind elements to specific objects in the model data, which creates a binding context and allows for relative binding in the control and all of 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"}}Copy the code

Element binding syntax:

<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>
Copy the code

This code actually defines the binding context:

binding="{/company}"
Copy the code

The value property can then be directly bound to a relative path field such as name in the JSON model company.

Instead of element binding, we need to use an absolute path as the binding path, using the absolute path syntax starting with a / :

<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>
Copy the code

JavaScript code to implement element Binding:

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

Where element Binding is used

Element binding is particularly useful when different fields in a UI interface have data sources that 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>
Copy the code

How do I create a new Binding context

For 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"}}]Copy the code

There is an input field like this:

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

How to set the binding context:

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

The XML view has bound the input value to the name attribute in the model. Resolve cannot be resolved because the path for this property in the model is not set. 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 so, all bindings are now resolved again relative to the parent context.

You can also use bindElement methods in conjunction with aggregate bindings. Let’s consider the following extensions to 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}}}]]Copy the code

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>
Copy the code

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

items="{companies}"
Copy the code

We need to use element Binding in the controller:

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

Thus, all the companies contained in the first element of the Regions array, America, are displayed correctly.