UI5: как повторно использовать форматтер в других представлениях?

Question

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

У меня есть этот форматер в моем представлении XML, которое определено в контроллере. Работает нормально, все хорошо.

Как я могу ссылаться и использовать этот форматер в другом XML представлении? Чтобы сохранить его DRY.

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

Ваш форматер. 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'
    }" />

---

См. Шаг 23 рекомендуемого официального прохождения, который отвечает на 95% всех вопросов для начинающих!

Answer 2

1. Сделать форматер чистым ^_? stati c функциональный модуль:

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

2. Требуйте и используйте этот форматер где угодно. Например, в определении представления с использованием core:require -синтаксиса (поддерживается с 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>
   

Если форматировщик не требует ссылка на контроллер, инкапсулирующая его, как показано выше, сохраняет код контроллера чистым, и модуль форматирования также становится проще для модульного тестирования.