元素綁定(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:ViewcontrollerName="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:ViewcontrollerName="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:ViewcontrollerName="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:ViewcontrollerName="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:ViewcontrollerName="sap.ui.sample.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><List id=”companyList” items="{companies}"><items><StandardListItemtitle="{name}"description="{city}"/></items></List> </mvc:View>

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

items="{companies}"

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

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

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

總結

以上是生活随笔為你收集整理的什么是 SAP UI5 的 Element binding的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。