元素繫結(element binding)允許我們將元素繫結到模型資料中的特定物件，這將建立繫結上下文(binding context)並允許控制元件及其所有子項中的`相對繫結`。 這在 master-detail 場景中特別有用。

假設我們有以下 JSON 資料：

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

element binding 的語法：

```xml
<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}'">	
</view>
```

其中這段程式碼實際上定義了繫結上下文：

```xml
binding="{/company}"
```
這樣 value 屬性可以直接繫結到 json 模型 company 中的相對路徑欄位比如 name 上去。

如果不採用 element binding，我們需要使用絕對路徑作為繫結路徑，即使用符號 / 開頭的絕對路徑語法：

```xml
<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}'}">	
</view>
```

JavaScript 程式碼實現 element binding：

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

# element binding 的應用場合

當一個 UI 介面的不同欄位，其資料來源從邏輯意義上說來自同一資料模型的同一層級時，element binding 特別有用：

```xml
<view controllername="sap.ui.sample.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
	<verticallayout id="vLayout" binding="{/company}" width="100%">
			<text text="{name}"></text>
			<text text="{city}"></text>
			<text text="{county}"></text>
	</verticallayout> 
</view>
```

# 如何建立一個新的 binding context

看個例子，我們有如下的 json 檔案：

```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：
```xml
<view controllername="sap.ui.sample.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
	<input id="companyInput" value="{name}">	
</view>
```

如何設定繫結上下文：

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

XML 檢視已將輸入值繫結到模型中的 name 屬性。 由於未設定模型中此屬性的路徑，因此無法 resolve. 要解析繫結，您可以使用 bindElement 方法從指定的相對路徑建立一個新的上下文。

若要刪除當前繫結上下文，請在輸入控制元件上呼叫 unbindElement 方法。 透過這樣做，所有繫結現在再次相對於父上下文解析。

您還可以將 bindElement 方法與聚合繫結結合使用。 讓我們考慮 JSON 資料的以下擴充套件：

```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 列表。

```xml
<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}"></standardlistitem>
		 </items>
	  </list>
</view>
```

下面這行語句無法直接被解析，因為這是一個相對路徑。

```xml
items="{companies}"
```
我們需要在控制器裡使用 element binding：

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

這樣，regions 陣列裡第一個元素，America，包含的所有 companies 就能夠正確顯示了。

什麼是 SAP UI5 的 Element binding

相關文章