元素绑定(element binding)允许我们将元素绑定到模型数据中的特定对象，这将创建绑定上下文(binding context)并允许控件及其所有子项中的相对绑定。 这在 master-detail 场景中特别有用。

假设我们有以下 JSON 数据：

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

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>

其中这段代码实际上定义了绑定上下文：

binding="{/company}"

这样 value 属性可以直接绑定到 json 模型 company 中的相对路径字段比如 name 上去。

如果不采用 element binding，我们需要使用绝对路径作为绑定路径，即使用符号 / 开头的绝对路径语法：

<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 代码实现 element binding：

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

element binding 的应用场合

当一个 UI 界面的不同字段，其数据源从逻辑意义上说来自同一数据模型的同一层级时，element binding 特别有用：

<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>

如何创建一个新的 binding context

看个例子，我们有如下的 json 文件：

{
	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"  
		}]
}

有这样一个 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>

如何设置绑定上下文：

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

XML 视图已将输入值绑定到模型中的 name 属性。 由于未设置模型中此属性的路径，因此无法 resolve. 要解析绑定，您可以使用 bindElement 方法从指定的相对路径创建一个新的上下文。

若要删除当前绑定上下文，请在输入控件上调用 unbindElement 方法。 通过这样做，所有绑定现在再次相对于父上下文解析。

您还可以将 bindElement 方法与聚合绑定结合使用。 让我们考虑 JSON 数据的以下扩展：

{
	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
			}]
		}
	] 
}

如上 json 文件所示，regions 里包含了一个 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>

下面这行语句无法直接被解析，因为这是一个相对路径。

items="{companies}"

我们需要在控制器里使用 element binding：

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

这样，regions 数组里第一个元素，America，包含的所有 companies 就能够正确显示了。