這是Jerry 2021年的第 8 篇文章，也是汪子熙公眾號總共第 279 篇原創文章。

系列目錄

(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源代碼的方式，弄清楚了Angular的Property binding，Event binding和Two-way binding的實現原理和區別。

Angular這三種綁定方式的使用語法如下圖所示：

但咱們今天的文章不會闡述Angular的數據綁定細節，而是繼續聚焦在SAP UI5上。

Jerry 前一篇文章 深入學習SAP UI5框架代碼系列之六：SAP UI5控件數據綁定的實現原理，曾經展示過這張源代碼截圖，第83行包含了SAP UI5支持的三種數據綁定模式：

(1) OneWay：單向綁定
(2) TwoWay：雙向綁定
(3) OneTime：單次綁定

從第69行代碼得知，SAP UI5模型的默認綁定方式為雙向綁定TwoWay.

當我第一次了解了SAP UI5三種不同的數據綁定模式時，腦子里馬上浮現出一個問題：

在我們的腳手架應用里，將button控件的text屬性，通過bindProperty函數，綁定到JSONModel實例的field_for_text字段上時，使用的是哪一種綁定模式？

oButton1.bindProperty("text", "/field_for_text");

答案是TwoWay，雙向綁定。在調試器里，通過下圖路徑即可查看：

oButton1.mBindingInfos.text.binding.sMode.

方法bindProperty里創建oBinding對象時，把JSONModel的默認binding方式(sDefaultBindingMode), TwoWay, 賦給oBinding對象。

SAP UI5雙向綁定的實現原理 - 數據從控件流向模型

我們調用控件的setText方法，修改控件text屬性。根據SAP UI5數據雙向綁定特性，控件text屬性綁定到的模型字段field_for_text的值，也會自動被修改：

oButton1.setText("用js修改控件值");

從上圖我們能確認，JSONModel模型實例的field_for_text也跟著被修改了。這一切是怎么發生的？

答案在Jerry之前的文章 深入學習SAP UI5框架代碼系列之五：SAP UI5控件的實例數據修改和讀取邏輯 介紹的button控件的setText方法里，其實已經提到過。

下圖第1320行的代碼，執行的邏輯正是在控件屬性通過setProperty被更新的場景下，將最新值同步到對應的模型字段中去。

在updateModelProperty函數內部，有一個IF條件判斷：只有當前oBinding對象實例的綁定模式為TwoWay時，才調用其setExternalValue方法，將模型字段的對應值，修改成來自控件屬性通過setText更改的最新值。

這就是控件text屬性的變化，能傳遞到對應模型字段的原理。

SAP UI5單向綁定的工作原理

通過之前的介紹我們得知，SAP UI5控件綁定的默認模式為TwoWay. 因此，我們如果要測試單向綁定，需要對已有的代碼進行修改，將綁定模式顯式修改成OneWay：

oButton1.bindProperty("text", "/field_for_text", undefined, "OneWay");

此時，控件text屬性通過setText的修改，不會再觸發JSONModel模型字段的變化，因為下圖3620行IF語句的條件不再成立。這就是SAP UI5單向數據綁定的原理：數據僅僅會在模型字段到控件屬性這個方向上單向流動。JSONModel字段值發生變化后，控件對應屬性會自動更新。反之，控件屬性通過API被修改時，不會引起JSONModel字段值的更新。

SAP UI5單次綁定的工作原理

SAP UI5官方網站上對單次綁定(OneTime)的說明：value is only read from the model once.

怎么理解這句話呢？

通過一個實際的例子來理解雙向綁定和單次綁定的區別。

在雙向綁定的測試代碼里，添加如下兩行代碼：

myData["field_for_text"] = "Tom"; oModel.checkUpdate();

模型字段field_for_text的初始值，在第28行賦值為Jerry, 然后在第34行設置為Tom. 調用模型的checkUpdate方法后，控件的標簽也自動刷新為Tom.

JSONModel的checkUpdate方法，會使用_fireChange，以事件通知的方式，將最新的Tom值廣播出去。

that.updateProperty最后會調用SAP UI5控件的setProperty方法，把text屬性的值賦成Tom.

下圖展示的setProperty方法，在Jerry之前的文章 深入學習SAP UI5框架代碼系列之五：SAP UI5控件的實例數據修改和讀取邏輯 里有詳細介紹。

現在開始測試單次綁定，將32行bindProperty函數調用里的綁定模式改成OneTime：

測試發現，在單次綁定模式下，SAP UI5控件屬性和模型字段的自動同步已經中斷了——button控件的text屬性，保存的是調用bindProperty方法那一刻，JSONModel的field_for_text值Jerry，而不是數據綁定之后，修改成的最新值Tom.

這個行為正是SAP UI5單次綁定的正確表現。

那么為什么在單次綁定模式下，縱然我們調用了模型的checkUpdate方法，仍然無法將模型字段的最新值，通過change事件通知機制告訴給控件的監聽函數呢？

答案就是，在SAP UI5控件指定了單次綁定的模式后，它"過河拆橋"，馬上就把響應模型change事件的監聽函數拆除了(detach，取消注冊之意)。

奧妙就在下圖3379行代碼的IF分支里：在SAP UI5控件調用bindProperty方法把控件屬性綁定到模型字段時，如果當前綁定模式為OneTime，則取消控件針對模型change事件的監聽函數注冊。

如此一來，不論接下來模型字段的值如何變化，該變化的值通過change事件進行廣播，但UI5控件再也不會收到該事件了，因而控件屬性也不會再刷新。

Jerry在SAP UI5 / Angular的實際開發生涯中，一旦遇到數據綁定出問題，總能迅速找到如何排錯的突破口，靠的就是對這些前端框架的數據綁定細節的熟悉。

希望本文能幫助大家對SAP UI5官方網站上解釋數據綁定三種方式的說明文字，有更深入的理解，感謝閱讀。

本系列下一篇文章，我們會介紹SAP UI5控件ID的生成邏輯，敬請期待。

系列目錄

(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的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的深入学习SAP UI5框架代码系列之七：控件数据绑定的三种模式 - One Way, Two Way和OneTime实现原理比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。