按照 Jerry 這篇文章介紹的程式碼，執行之後，給型別為 `sap.ui.model.type.Currency` 的欄位設定一個非 `number` 型別的值之後，觸發該資料型別自帶的資料校驗機制，顯示 `Enter a number` 的錯誤訊息。

[SAP UI5 應用開發教程之四十六 - 使用 Message Manager 實現開箱即用的驗證(Validation)資訊丟擲](https://jerry.blog.csdn.net/article/details/123142913)

本文介紹 SAP UI5 `ManagedObject` 的 `setProperty` 方法的執行原理。

首先明確，什麼是 `ManagedObject`？

託管屬性表示 ManagedObject 的狀態。 它們可以儲存簡單資料型別（如“字串”或“整數”）的單個值。 它們具有名稱（例如“size”）和獲取當前值（getSize）或設定新值（setSize）的方法。 當透過呼叫 setter 修改屬性時，ManagedObject 被標記為無效。 可以使用 #bindProperty 方法將託管屬性繫結到 sap.ui.model.Model 中的屬性。 對模型屬性的更新將自動反映在託管屬性中，並且 - 如果 TwoWay 資料繫結處於活動狀態，則對託管屬性的更改將反映在模型中。 可以透過呼叫#unbindProperty 刪除現有繫結。
![](https://img-blog.csdnimg.cn/img_convert/271653c3b3206f850eaaaf26647346af.png)

當 input 控制元件失去 focus 之後，觸發 `onsapfocusleave`，這個方法呼叫 `onChange`：

![](https://img-blog.csdnimg.cn/img_convert/d486a98aad6d79b468479eb59f40d8ed.png)

傳入的輸入引數，`event` 型別為 `sapfocusleave`：

![](https://img-blog.csdnimg.cn/img_convert/ab96b8a5b988ed3930ae91dee8dbc160.png)

如果當前最新的值和之前的值 `getLastValue()` 不相等，則呼叫 `this.setValue`：

![](https://img-blog.csdnimg.cn/img_convert/ec3258616d0848ab0c71c7cde44d3e68.png)

Input.setValue 呼叫 InputBase.setValue:

![](https://img-blog.csdnimg.cn/img_convert/469e5658889b359d442b30cf809c8356.png)

setValue 最終呼叫 setProperty，屬性名稱為 `value`：

![](https://img-blog.csdnimg.cn/img_convert/5a0b77f069da78572b009d091a64d183.png)

正式進入 setProperty 方法，首先從 `mProperties` 裡得到修改之前的值：

![](https://img-blog.csdnimg.cn/img_convert/d73825478569502edea18c59d543ff25.png)

然後進行 `validateProperty`：

![](https://img-blog.csdnimg.cn/img_convert/a0da32e0797d01881272035fd34023da.png)

validateProperty 內部，首先從 `this.getMetadata().getManagedProperty(sPropertyName)` 讀取該 value 屬性的 `後設資料`：

![](https://img-blog.csdnimg.cn/img_convert/0eec77e44a3b20934e0943c7875f47c6.png)

關於 SAP UI5 控制元件的後設資料設計，請參考我這篇文章：

[深入學習SAP UI5框架程式碼系列之四：SAP UI5控制元件的後設資料實現](https://blog.csdn.net/i042416/article/details/112217161)。

獲得 string 型別物件：

![](https://img-blog.csdnimg.cn/img_convert/c7e0cba14e7809254c4cb8bce71a00d5.png)

型別物件由一系列函式組成：
![](https://img-blog.csdnimg.cn/img_convert/3e253b854c0831f82aee5fcc8998a54d.png)

執行 normalize 操作：

![](https://img-blog.csdnimg.cn/img_convert/2dfb9df040b2ece9446b81530077da51.png)

將這個不合法的 value，設定到 `this.mProperties[sPropertyName] ` 中。

![](https://img-blog.csdnimg.cn/img_convert/41114751c17fa10ba02baf7d9c35d34c.png)

進行雙向繫結的邏輯處理：`this.updateModelProperty`

![](https://img-blog.csdnimg.cn/img_convert/86640c51ad40aa4c84cbc565bba52168.png)

拿到繫結物件：

![](https://img-blog.csdnimg.cn/img_convert/f36b88b7a74c350a8a137a0d0465eb77.png)

進入雙向繫結的處理分支：

![](https://img-blog.csdnimg.cn/img_convert/6a5235bdb21a6afef90b8c0a5518b877.png)

```javascript
if (oBinding && oBinding.getBindingMode() == BindingMode.TwoWay) {
				oBindingInfo.skipPropertyUpdate++;
				SyncPromise.resolve(oValue).then(function(oValue) {
					return oBinding.setExternalValue(oValue);
				}).then(function() {
					oBindingInfo.skipPropertyUpdate--;
					return oBinding.getExternalValue();
				}).then(function(oExternalValue) {
					if (oValue != oExternalValue) {
						that.updateProperty(sName);
					}
					handleSuccess();
				}).catch(function(oException) {
					oBindingInfo.skipPropertyUpdate--;
					handleException(oException);
				}).unwrap();
```
![](https://img-blog.csdnimg.cn/img_convert/74b603b4d178300f00f8ce519e7b3e85.png)

```javascript
SyncPromise.resolve(oValue).then(function(oValue) {
					return oBinding.setExternalValue(oValue);
				})
```

![](https://img-blog.csdnimg.cn/img_convert/370ef0ca7e361b6287c944a36eb120bb.png)

在 `CompositeBinding.js` 內部，核心邏輯是第 325 行的程式碼：

```javascript
that.oType.parseValue(oValue, that.sInternalType, aCurrentValues);
```

![](https://img-blog.csdnimg.cn/img_convert/02a14c414cf94cdc284231a589ed395b.png)

呼叫 `outputFormat` 進行輸入值的解析工作：

![](https://img-blog.csdnimg.cn/img_convert/44ed974db3f3aeb8e2a46151cf5f21ad.png)

SAP UI5 setProperty 的執行邏輯單步調式和分析

相關文章