工廠函式是一種更強大的從模型資料建立控制元件的方法。 為控制元件聚合的每個條目呼叫工廠函式，開發人員可以決定每個條目是否應由具有不同屬性的相同控制元件表示，甚至每個條目由完全不同的控制元件表示。

工廠函式帶有引數sId，它應該用作新控制元件的ID，以及oContext，它用於訪問條目的模型資料。 返回的物件必須是 sap.ui.core.Element 型別。 下面是如何在 XML 檢視和控制器中使用來自 List Binding（Aggregation Binding）的 JSON 模型資料來實現此場景：

```xml
<view controllername="sap.ui.sample.App" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc">
	<verticallayout content="{ path: '/companies', factory: '.createContent'}" class="sapUiContentPadding" width="100%"></verticallayout>
</view>
```

工廠函式 `.createContent` 實現在控制器裡：

```javascript
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/ui/model/type/String",
	"sap/ui/model/type/Float",
	"sap/m/Input",
	"sap/m/Text",
	"sap/m/CheckBox"
], function (Controller, JSONModel, StringType, Float, Input, Text, CheckBox ) {
	"use strict";
	return Controller.extend("sap.ui.sample.App", {
		onInit : function () {
		…
		},
		createContent: function (sId, oContext) {
		var oRevenue = oContext.getProperty("revenue");
			switch(typeof oRevenue) {
				case "string":
					return new Text(sId, {
						text: {
							path: "revenue",
							type: new StringType()
						}
					});
  
				case "number":
					return new Input(sId, {
						value: {
							path: "revenue",
							type: new Float()
						}
					});
				
				case "boolean":
					return new CheckBox(sId, {
						checked: {
							path: "revenue"
						}
					});
			}
		},
	});
});
```

在控制器裡的工廠函式實現裡，根據 revenue 的資料型別來動態建立 SAP UI5 控制元件。

在 App 控制器中，我們建立了一個名為 productListFactory 的新函式。工廠函式返回關聯繫結上下文的控制元件，類似於我們在前面步驟中定義的 XML 模板。此工廠函式返回的控制元件型別必須適合 sap.m.List 物件的專案聚合。在這種情況下，我們根據儲存在要建立的專案的上下文中的資料返回 StandardListItem 或 ObjectListItem。

我們透過檢查當前庫存水平以及產品是否已停產來決定返回哪種型別的控制。對於這兩個選項，我們準備並載入一個 XML 片段，以便我們可以以宣告方式定義檢視邏輯並分配當前控制器。如果庫存水平為零並且產品也已停產，那麼我們使用 ProductSimple XML 片段，否則使用 ProductExtended XML 片段。

XML 片段在每種情況下只需要載入一次，因此我們透過在控制器上儲存一個輔助變數並且只載入一次來建立一個 Singleton。對於列表中的每一項，我們克隆儲存在控制器上的相應控制元件。此方法建立一個新的控制元件副本，我們可以將其繫結到列表項的上下文。請注意：在工廠函式中，我們對建立的控制元件的生命週期負責。

如果產品沒有停產但庫存水平為零，我們暫時缺貨。在這種情況下，我們新增了一個 ObjectAttribute，它使用 JavaScript 將 Out of Stock 訊息新增到控制元件中。與 XML 檢視或片段中的宣告性定義類似，我們可以使用資料繫結語法來繫結屬性。在這種情況下，我們將文字繫結到資源包中的一個屬性。由於 Attribute 是列表項的子項，因此它可以訪問所有分配的模型和當前繫結上下文。

最後，我們返回顯示在列表中的控制元件。

SAP UI5 資料繫結中的工廠函式

相關文章