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