什么是 SAP UI5 的 Element binding

元素绑定(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 就能够正确显示了。