I will use the field “ClosingDate” to demonstrate my favorite approach to trouble shoot field binding issue. Generally speaking, the issue could be summarized as that although you have bound your UI control to a given field of a Json or odata model, however in the runtime nothing is displayed in the control.

In order to find the root cause of such issue, we need to understand the logic that how is the field value in a model bound to our control and finally displayed in the UI.

The field above, “Closing Date”, is bound to the model field “ClosingDate” in the xml view.

In the runtime, such binding relationship will be represented by an instance of Binding.

The corresponding js file for each kind of property binding could be found from this folder:

Within this folder, you can find dedicated js file for OData Model property, Json Model property and i18n Model property accordingly.
The Binding and ClientPropertyBinding are the prototype of these concrete binding type.

Since there are so many controls which have been bound to model fields, the constructor of Binding will be called again and again for each binding relationship.

As I am only interested with “ClosingDate”, so I make small modifications on the Binding.js directly in Chrome.

Then I resume the execution of debugger and soon the debugger stops at the very point where the mapping instance for “ClosingDate” is instantiated:

Every binding instance has one attribute sPath to indicate which model field it represents, and another attribute oValue, which contains the actual content of the model field, which will be rendered in the control.

Now I would like to know for the model field “ClosingDate”, when the oValue will be filled and where the content of oValue come from. So I switched to the inner callstack:

The value will be filled by this._getValue():

And now we are clear: the oValue of current binding instance comes from the corresponding node of OData model, to be exactly using UI5 terminology, from the binding Context.

The OData Model instance has one attribute “oData” which contains detail data for each list item. ODataModel._getObject will get the binding context of current binding property instance and then fetch the property value from that binding context:


Now this.oValue is filled and this very value will be displayed inUI.

When the control containing any attributes which are bound to a property of Model, the function “getExternalValue” of related property binding instance will be called. The result will be displayed in UI.

If there is any formatter defined for the property binding by application, for example in my application I have defined my custom formatter “dateFormatterMaster”. In line 79 framework will call such formatter if there is any.

And through debugging and callstack, I can see my formatter is called.

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

SAP UI5应用如果遇到数据绑定问题时,应该如何自己定位问题?相关推荐

  1. SAP UI5 XML 视图中数据绑定路径语法的难点和易混淆点的专题讲解

    文章目录 什么时候在绑定路径里使用 / ? 什么时候在绑定路径里使用 > ? 当 SAP UI5 开发人员对使用的数据模型进行显式重命名时 当 SAP UI5 应用存在的数据模型实例大于 1 个 ...

  2. 如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题

    我本地开发了一个 SAP UI5 应用,消费真实的 OData 服务: https://services.odata.org/Northwind/Northwind.svc 会遇到跨域问题错误:COR ...

  3. SAP UI5 Mock server,为什么运行时无法返回 JSON 类型的测试数据?

    在 MockServer attachAfter hook 里进行编程,发现这里是可以返回 Products.json 里维护的数据的: 成功取得了 response: 处理返回类型为 json 格式 ...

  4. 深入学习SAP UI5框架代码系列之六:SAP UI5控件数据绑定的实现原理

    这是Jerry 2021年的第 7 篇文章,也是汪子熙公众号总共第 278 篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) SAP UI5 module懒加 ...

  5. 如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

  6. SAP UI5 进阶 - XML 视图里定义的 UI 控件,运行时实例化的技术细节剖析试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

  7. 深入学习SAP UI5框架代码系列之四:SAP UI5控件的元数据实现

    这是Jerry 2021年的第5篇文章,也是汪子熙公众号总共第276篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...

  8. 如何在 SAP UI5 应用里显示 PDF 文件试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...

  9. 使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 本专栏计划的文章数在 300 篇左右,到 2022年11月19日为止,目前已经更新了 149 篇,专栏完成度为 49.6%. 作者简介 Jerry ...

最新文章

  1. [知识复习] 结构体以及结构体指针
  2. XShell配置Socket5代理
  3. 4.9 行列均不满秩方程
  4. [vue] 说说你对vue组件的设计原则的理解
  5. OpenCV学习笔记(十一):阈值化:threshold(),adaptivethreshold()
  6. (转)MyBatis框架的学习(一)——MyBatis介绍
  7. django orm关联查询_Django ORM 聚合查询和分组查询实现详解
  8. 面试中 项目遇见的难点答案_5月6日周一晚八点CCtalk直播2019年江苏省考公务员面试冲刺类型题难点解析突破举一反三...
  9. c#app.config配置文件使用
  10. 我的编程学习日志(9)--交换A,B值得方法(相加,异或,swap函数)
  11. kettle教程,简单插入与更新
  12. 家校协同小程序实战教程
  13. c语言接收rs232串口速率,基于C语言的RS232串行接口通信实现
  14. 笔记本计算机运行程序,这几招让你的笔记本电脑运行速度变快 必学技巧
  15. 阿里云网盘资源免费分享论坛正式上线
  16. NI LabVIEW 2018 DAQmx定时属性节点 缺失部分属性的问题 解决方案
  17. 金蝶EAS DEP脚本(1)—— 基本概念
  18. 产业互联网周报 | 上海数交所:数据产品交易额预计全年超过1亿元;Zoom单季度净利润同比下降86%;...
  19. linux qemu-nbd介绍
  20. 智能护眼台灯芯片方案开发usb充电小夜灯IC感应灯触摸单片机

热门文章

  1. C#操作Excel数据增删改查(转)
  2. [Android] Android4.0、4.1在手机上制作fastboot线刷包;
  3. 几个有用的ASP Function
  4. QQ2007退出市场
  5. 75. Sort Colors - LeetCode
  6. 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。
  7. C#.net 支付宝接口
  8. sonar 设置模板(Template)
  9. linux gradle解压后, 执行gradle error13: Permission denied
  10. 第三次学JAVA再学不好就吃翔(part110)--使用指定的码表读写字符