當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入学习SAP UI5框架代码系列之七：控件数据绑定的三种模式 - One Way, Two Way和OneTime实现原理比较

發(fā)布時間：2023/12/19 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了深入学习SAP UI5框架代码系列之七：控件数据绑定的三种模式 - One Way, Two Way和OneTime实现原理比较小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

系列目錄

(0)?SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

(1)?SAP UI5 module懶加載機制

(2)?SAP UI5 控件渲染機制

(3)?HTML原生事件 VS SAP UI5 Semantic事件

(4)?SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實現(xiàn)

(5)?SAP UI5控件的實例數(shù)據(jù)修改和讀取邏輯

(6)?SAP UI5控件數(shù)據(jù)綁定的實現(xiàn)原理

(7) SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實現(xiàn)原理比較(本文)

(8) SAP UI5控件ID的生成邏輯

(9) SAP UI5控件的多語言(國際化,Internationalization,i18n)支持的實現(xiàn)原理

(10) XML視圖里的button控件

(11) button控件和它背后的DOM元素

經(jīng)過了三個多月不懈的努力，Jerry終于初步掌握了使用Angular開發(fā)企業(yè)級前端應(yīng)用的技能，也通過閱讀Angular源代碼的方式，弄清楚了Angular的Property binding，Event binding和Two-way binding的實現(xiàn)原理和區(qū)別。

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

但咱們今天的文章不會闡述Angular的數(shù)據(jù)綁定細節(jié)，而是繼續(xù)聚焦在SAP UI5上。

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

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

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

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

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

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

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

oButton1.mBindingInfos.text.binding.sMode.

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

SAP UI5雙向綁定的實現(xiàn)原理 - 數(shù)據(jù)從控件流向模型

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

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

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

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

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

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

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

SAP UI5單向綁定的工作原理

通過之前的介紹我們得知，SAP UI5控件綁定的默認模式為TwoWay. 因此，我們?nèi)绻獪y試單向綁定，需要對已有的代碼進行修改，將綁定模式顯式修改成OneWay：

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

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

SAP UI5單次綁定的工作原理

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

怎么理解這句話呢？

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

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

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

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

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

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

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

現(xiàn)在開始測試單次綁定，將32行bindProperty函數(shù)調(diào)用里的綁定模式改成OneTime：

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

這個行為正是SAP UI5單次綁定的正確表現(xiàn)。

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

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

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

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

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

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

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