SAP UI5 数据绑定中的工厂函数

工厂函数是一种更强大的从模型数据创建控件的方法。为控件聚合的每个条目调用工厂函数，开发人员可以决定每个条目是否应由具有不同属性的相同控件表示，甚至每个条目由完全不同的控件表示。

工厂函数带有参数sId，它应该用作新控件的ID，以及oContext，它用于访问条目的模型数据。返回的对象必须是 sap.ui.core.Element 类型。下面是如何在 XML 视图和控制器中使用来自 List Binding（Aggregation Binding）的 JSON 模型数据来实现此场景：

<mvc:ViewcontrollerName="sap.ui.sample.App"xmlns="sap.m"xmlns:l="sap.ui.layout"xmlns:mvc="sap.ui.core.mvc"><l:VerticalLayoutcontent="{ 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 是列表项的子项，因此它可以访问所有分配的模型和当前绑定上下文。

最后，我们返回显示在列表中的控件。

SAP UI5 数据绑定中的工厂函数相关推荐

SAP UI5 应用开发教程之一百零三 - 如何在 SAP UI5 应用中消费第三方库试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
SAP UI5 应用开发教程之十八 - SAP UI5 数据绑定语法里的特殊符号，以及绝对绑定和相对绑定概念详解
通过本教程之前的 17 个步骤的学习,大家都已经使用到了 SAP UI5 数据绑定的语法. 本文不会介绍新的内容,而是对过去了解到的 SAP UI5 数据绑定语法中出现的两个特殊符号,"&g ...
如何在 SAP UI5 应用中集成第三方库：一个在移动设备上查看 Web 应用打印调试信息的小技巧
这是 Jerry 2021 年的第 43 篇文章,也是汪子熙公众号总共第 320 篇原创文章. 做 Web 开发的程序员,无论使用 SAP UI5,还是 Angular,React,Vue,每天都离不 ...
SAP系统和微信集成的系列教程之六：如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中
这是Jerry 2020年的第87篇文章,也是汪子熙公众号总共第269篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
关于SAP UI5数据绑定我的一些原创内容
如何查找SAP UI5官方关于数据绑定的文档: https://sapui5.hana.ondemand.com/ 点Documentation: Filter里输入data就能看到Data Bind ...
JavaScript中的工厂函数vs构造函数vs class
原文链接:JavaScript Factory Functions vs Constructor Functions vs Classes 作者:Eric Elliott 译者:sunny 转载需提前 ...
工厂好的html页面,jquery中被誉为工厂函数的是什么？
jquery中被誉为工厂函数的是"$()".在jQuery中,无论我们使用哪种类型的选择符都需要从一个"$"符号和一对"()"开始.下面本篇 ...
SAP UI5框架中，onInit方法执行次数的讨论
onInit只会被执行一次: _getViewWithGlobalId最后会调用onInit: UI框架都是相通的,我们以前做的Web UI,onInit也只会执行一次,而DO_PREPARE_OUT ...
如何使用JavaScript中的工厂函数构建可靠的对象
Discover Functional JavaScript was named one of the best new Functional Programming books by BookAut ...

SAP UI5 数据绑定中的工厂函数

SAP UI5 数据绑定中的工厂函数相关推荐

最新文章

热门文章