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

系列目錄

(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，賦予不同的模型名稱即可。