元素绑定(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相关推荐

SAP UI5 Dropdown list binding debugging
Created by Wang, Jerry, last modified on May 20, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP UI5 OData API binding.filter(filter) 会触发发往后台的 OData 请求
Created by Wang, Jerry, last modified on Jan 16, 2015
SAP UI5 数据绑定中的工厂函数
工厂函数是一种更强大的从模型数据创建控件的方法. 为控件聚合的每个条目调用工厂函数,开发人员可以决定每个条目是否应由具有不同属性的相同控件表示,甚至每个条目由完全不同的控件表示. 工厂函数带有参数sI ...
深入学习SAP UI5框架代码系列之六：SAP UI5控件数据绑定的实现原理
这是Jerry 2021年的第 7 篇文章,也是汪子熙公众号总共第 278 篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) SAP UI5 module懒加 ...
为SAP UI5正名 - 它也支持双向绑定
有的程序员和我讨论其现在的前端框架时,说Angular比UI5高级,因为前者支持双向绑定. 然而UI5也是支持双向绑定的,看下面这张图里Data Binding->Two way data bi ...
OPEN(SAP) UI5 扫盲
1 扫盲什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI) ...
SAP UI5 应用的 OData XML 格式的元数据请求解析原理，基于 DOMParser
前一篇文章SAP UI5 应用的 OData 元数据请求响应的解析原理分析我们介绍了 SAP UI5 OData 元数据解析的入口.本文继续介绍基于 DOMParser 的 XML 数据解析原理. 入 ...
SAP UI5 应用开发教程之二十 - SAP UI5 的表达式绑定用法讲解
在本教程的前一步骤 SAP UI5 初学者教程之十九 - SAP UI5 数据类型和复杂的数据绑定里,我们已经开发了一个具有金额和货币显示的发票列表,效果如下图所示: 本步骤我们继续对这个发票列表添 ...
基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
这是 Jerry 2021 年的第 62 篇文章,也是汪子熙公众号总共第 339 篇原创文章. 龟虽寿曹操神龟虽寿,犹有竟时:腾蛇乘雾,终为土灰.老骥伏枥,志在千里:烈士暮年,壮心不已.盈缩之期,不但 ...

什么是 SAP UI5 的 Element binding

element binding 的应用场合

如何创建一个新的 binding context

什么是 SAP UI5 的 Element binding相关推荐

最新文章

热门文章