UI5：如何在其他视图中重用格式化程序？答案

【问题标题】：UI5: how to reuse formatter in other views?UI5：如何在其他视图中重用格式化程序？
【发布时间】：2020-08-10 19:28:18
【问题描述】：

<Text text="{ parts: [ '/firstText', '/number' ], formatter: '.NumberFormatter' }" />

我在控制器中定义的 XML 视图中有这个格式化程序。它工作正常，一切都很好。

如何在另一个 XML 视图中引用和使用此格式化程序？保持干燥。

【问题讨论】：

这能回答你的问题吗？ Shared event handler for XML views with different controllers

标签： javascript xml sapui5

【解决方案1】：

将格式化程序做成纯^_?静态函数模块：

sap.ui.define([ // E.g. in "./model/numberFormatter.js"
  // ...
], function(/*...*/) {
  "use strict";
  // ...
  return function(/*...*/) {
    return /*...*/;
  };
});

在您想要的任何地方都需要并使用该格式化程序。例如，在视图定义中使用core:require-syntax（从 UI5 1.69 开始支持）：

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{
    myFormatter: 'mynamespace/model/numberFormatter'
  }">
  <Text text="{ parts: [/*...*/], formatter: 'myFormatter' }" />
</mvc:View>

除非格式化程序不需要控制器引用，如上所示封装它可以使控制器代码保持干净并且格式化程序也变得更容易进行单元测试。

【讨论】：

【解决方案2】：

通常格式化程序在自己的 JS 文件中

您的项目结构：

- webapp
|-- controller
  |-- First.controller.js
  |-- Second.controller.js
|-- util
  |-- Formatter.js
|-- view
  |-- First.view.xml
  |-- Second.view.xml
|-- Component.js
|-- index.html

您的 Formatter.js 可能如下所示

sap.ui.define([], function () {
    "use strict";
    return {
        NumberFormatter: function (sText, iNumber) {
            ...
        },
        MyOtherFormatter: function(...) {
            ...
        }
    };
});

现在每个控制器都必须引用 Formatter 以使其在您的视图中可用。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "../util/Formatter"
], function (Controller, Formatter) {
    "use strict";
    return Controller.extend("demo.controller.First", {

        formatter: Formatter, // < Important

        onInit : function () {
            ...
        }
    });
});

终于可以在你的视图中使用它了

<m:Text text="{
        parts: [ 
            'myModel>firstText',
            'myModel>/number'
        ],
        formatter: '.formatter.NumberFormatter'
    }" />

请参阅强烈推荐的官方演练Step 23，它回答了所有初学者问题的 95%！

【讨论】：