什麼是 SAP UI5 的 Element binding

注销發表於2022-02-15
UI

元素繫結(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 就能夠正確顯示了。

相關文章