SAP UI5控制元件資料繫結的三種模式 - One Way, Two Way和OneTime實現原理比較

這是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的原創文章，盡在："汪子熙":