这是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的原创文章，尽在：”汪子熙”: