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