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

编程问答

深入学习SAP UI5框架代码系列之六：SAP UI5控件数据绑定的实现原理

發布時間：2023/12/19 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了深入学习SAP UI5框架代码系列之六：SAP UI5控件数据绑定的实现原理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這是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的數據綁定也有一定的借鑒作用。

感謝閱讀。