SAP UI5 数据绑定中的工厂函数
SAP UI5 数据绑定中的工厂函数
工厂函数是一种更强大的从模型数据创建控件的方法。 为控件聚合的每个条目调用工厂函数，开发人员可以决定每个条目是否应由具有不同属性的相同控件表示，甚至每个条目由完全不同的控件表示。
工厂函数带有参数sId，它应该用作新控件的ID，以及oContext，它用于访问条目的模型数据。 返回的对象必须是 sap.ui.core.Element 类型。 下面是如何在 XML 视图和控制器中使用来自 List Binding（Aggregation Binding）的 JSON 模型数据来实现此场景：
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<l:VerticalLayout
content="{ path: '/companies', factory: '.createContent'}"
class="sapUiContentPadding"
width="100%"/>
</mvc:View>工厂函数 .createContent 实现在控制器里：
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 是列表项的子项，因此它可以访问所有分配的模型和当前绑定上下文。
最后，我们返回显示在列表中的控件。