UI5：如何在其他視圖中重用格式化程序？

Question

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

我在 controller 中定義的 XML 視圖中有這個格式化程序。 它工作正常，一切都很好。

如何在另一個 XML 視圖中引用和使用此格式化程序？ 保持干燥。

Answer 1

通常格式化程序在他們自己的 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(...) {
            ...
        }
    };
});

現在每個 controller 都必須引用 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'
    }" />

---

請參閱強烈推薦的官方演練的第 23 步，它回答了所有初學者問題的 95%！

Answer 2

1. 使格式化程序成為純粹的^_? static function模塊：

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

2. 在您想要的任何地方都需要並使用該格式化程序。 例如，在視圖定義中使用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>

除非格式化程序不需要 controller 參考，否則如上所示封裝它可以保持 controller 代碼干凈並且格式化程序也變得更容易進行單元測試。