共计 3769 个字符，预计需要花费 10 分钟才能阅读完成。
这是 Jerry 2021 年的第 7 篇文章，也是汪子熙公众号总共第 278 篇原创文章。
系列目录
(0) SAP UI5 利用开发人员理解 UI5 框架代码的意义
(1) SAP UI5 module 懒加载机制
(2) SAP UI5 控件渲染机制
(3) HTML 原生事件 VS SAP UI5 Semantic 事件
(4) SAP UI5 控件元数据的元数据实现
(5) SAP UI5 控件的实例数据批改和读取逻辑
(6) SAP UI5 控件数据绑定的实现原理(本文)
(7) SAP UI5 控件数据绑定的三种模式：One Way，Two Way 和 OneTime 实现原理比拟
(8) SAP UI5 控件 ID 的生成逻辑
(9) SAP UI5 控件的多语言 (国际化,Internationalization,i18n) 反对的实现原理
(10) XML 视图里的 button 控件
(11) button 控件和它背地的 DOM 元素
Jerry 应用 Angular 做开发曾经有几个月了，其间也学习了 Angular 控件的数据绑定，再回过头来重温 SAP UI5 控件数据绑定，别有一番滋味。
之前 Jerry 时不时会在微信上收到一些敌人的征询，诸如：“我的 SAP UI5 控件做了绑定，从 Chrome 开发者工具也能看到后盾返回的 OData API 的确蕴含了数据，然而 UI5 页面渲染进去之后，为什么控件上没有显示绑定的数据呢？”此类问题。
其实，如果理解一些 SAP UI5 控件的数据绑定实现细节，此类问题齐全能够通过本人调试的形式去排错。
咱们还是应用之前文章 一个用于 SAP UI5 学习的脚手架利用，没有任何后盾 API 的依赖 提到的脚手架利用来学习。
增加下列五行高亮代码：
创立一个新的 JSON 模型，蕴含一个字段 field_for_text, 值为 Jerry，再将该模型绑定到 button 控件，模型字段 field_for_text 绑定到 button 的 text 属性。
这样一来，运行时看到按钮的标签就成了 field_for_text 的值 ”Jerry”，而不是第 18 行给 text 属性赋予的硬编码值 ”Button”：
本文的目标就是，论述分明第一张图高亮的五行代码，背地产生了什么事件。
var oModel = new sap.ui.model.json.JSONModel();
当这行代码执行之后，JSONModel 以及蕴含对应的模型绑定实现逻辑的 JavaScript 源文件会主动被加载，这体现了 SAP UI5 Module 的懒加载个性，在本系列这篇文章里介绍过：深刻学习 SAP UI5 框架代码系列之一：UI5 Module 的懒加载机制。
本系列之前的文章，咱们已经屡次提及 SAP UI5 控件的原型继承链：
Button -> Control -> Element -> ManagedObject
-> EventProvider -> BaseObject
本文咱们会学习到另一条原型继承链：
JSONModel -> ClientModel -> Model -> MessageProcessor -> EventProvider -> BaseObject
从上图第 61 行的构造函数的输出参数 oData，不难发现，在 UI5 利用里创立 JSONModel 实例时，能够将模型存储的数据一并指定。
这样，咱们之前脚手架利用里的代码，能够精简成下图左边所示：
单步调试 JSONModel 的构造函数，会发现它顺次会调用原型继承链上游节点的 ClientModel，Model 和 MessageProcessor 的构造函数。
下图是 Model 构造函数的实现，信息量很大：
(1) 第 69 行，阐明 SAP UI5 模型绑定的默认形式是双向绑定；
(2) 第 83 行，阐明 SAP UI5 模型绑定反对单向，双向和单次绑定。本系列下一篇文章 SAP UI5 控件数据绑定的三种模式：One Way，Two Way 和 OneTime 实现原理比拟 会介绍这三种形式的区别。
oModel.setData(myData);
将一个 JSON 对象通过 setData 传入 JSONModel 实例。
setData 办法有一个可选参数 bMerge，如果显式指定为 true，则会调用下图 88 行的 jQuery.extend, 将本地传入的 JSON 对象同 JSONModel 原有的数据进行合并(merge). 因为咱们本例调用 setData 并未指定该参数，所以不进行合并，间接执行 95 行的 checkUpdate：
因为此时 UI5 button 控件实例尚未同 JSONModel 实例建设绑定关系，所以模型的 aBindings 数组为空，因而 checkUpdate 理论并未执行任何和控件绑定相干的操作，间接返回。
oButton1.setModel(oModel);
这行语句的作用，就是将控件实例和传入办法的 JSONModel 实例建设绑定关系。
- 4597～4604：该 IF 分支解决 UI5 控件之前曾经绑定到某个模型实例的状况，此时应用 delete 操作，删除原有的模型援用，而后更新绑定信息。而本例是 button 控件第一次调用 setModel，故不会进入此 IF 分支。
- 4607：UI5 控件保护了一个相似字典的键值对数据结构，key 为模型名称，value 为模型实例。从此处的 SAP UI5 源代码实现不难得出结论，UI5 控件反对同时绑定到多个模型实例上，只有该控件在调用 setModel 办法时，给传入的模型实例通过办法第二个参数 sName，赋予不同的模型名称即可。
至此，JSONModel 实例的 field_for_text 字段值，还不会主动流向 button 控件的 text 属性，直到上面这行代码的执行。
oButton1.bindProperty(“text”,“/field_for_text”);
该办法首先结构了一个蕴含 JSONModel 绑定字段的对象 oBindingInfo:
将该 oBindingInfo 保护到控件的地方绑定信息存储数据结构 mBindingInfos 里，该数据结构同样是一个键值对，key 为控件属性，本例为 text，值为 oBindingInfo 对象，对象里蕴含了 text 属性绑定到 JSONModel 实例的字段名称：field_for_text.
单步调试进入上图 3347 行的_bindProperty 办法：
3417 行，调用 JSONModel 的 bindProperty 办法，生成 oBinding 对象：
这里再次出现了对于 SAP UI5 数据绑定的三种模式解决的源代码，本系列后续文章会专门介绍。
3433 即将生成的 oBinding 对象实例，增加到 aBindings 数组里。
那么 oBinding 实例是如何生成的？须要单步调试上图 3417 行的 oModel.bindProperty 代码。
JSONModel.bindProperty 的实现，就是一个单纯的 new 调用。不过更重要的是，此处咱们理解到了另一条原型继承链：
JSONPropertyBinding -> ClientPropertyBinding -> PropertyBinding -> Binding -> EventProvider -> BaseObject
咱们留神到，在 oBinding 实例里，有个字段叫做 oValue, 其值正好是 JSONModel 实例保护的 JSON 对象字段 field_for_text 的值 Jerry. 实际上，最初 button 控件的 text 属性，显示的值正是 oBinding 实例 oValue 字段的值。
所以须要搞清楚 this.oValue 的赋值逻辑，就得单步执行上图第 35 行的 this._getValue 办法。
this._getValue()
该函数负责将 field_for_text 字段的值，从 this.oModel.oData.field_for_text 字段中提取进去，如下图所示：
一旦 this._getValue 执行完之后，控件 text 属性同 JSONModel 实例的 field_for_text 字段就胜利建设起绑定关系，之后咱们就能间接从控件实例变量 oButton1 登程，去找到其 text 属性应该显示的值：
心愿通过本文的介绍，能让大家对 SAP UI5 控件数据绑定的实现原理有一个最根本的理解。
如果遇到控件绑定不能依照本人的冀望工作的时候，无妨试试依照本文提到的这些关键点去调试。
本系列下一篇文章，会介绍 SAP UI5 控件数据绑定的三种模式：One Way，Two Way 和 OneTime 的实现原理比拟。
我的理论工作中发现，理解了 SAP UI5 这些数据绑定形式的实现，对我近期学习 Angular 的数据绑定也有肯定的借鉴作用。
感激浏览。
系列目录
(0) SAP UI5 利用开发人员理解 UI5 框架代码的意义
(1) SAP UI5 module 懒加载机制
(2) SAP UI5 控件渲染机制
(3) HTML 原生事件 VS SAP UI5 Semantic 事件
(4) SAP UI5 控件元数据的元数据实现
(5) SAP UI5 控件的实例数据批改和读取逻辑
(6) SAP UI5 控件数据绑定的实现原理(本文)
(7) SAP UI5 控件数据绑定的三种模式：One Way，Two Way 和 OneTime 实现原理比拟
(8) SAP UI5 控件 ID 的生成逻辑
(9) SAP UI5 控件的多语言 (国际化,Internationalization,i18n) 反对的实现原理
(10) XML 视图里的 button 控件
(11) button 控件和它背地的 DOM 元素
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: