UI5：格式化程序从XML视图多次调用或过早 [英] UI5: Formatter called multiple times or too soon from an XML view

问题描述

我正在使用OpenUI5。使用 formatter.js ，我已经格式化了视图中的一些文本。

I'm using OpenUI5. Using the formatter.js, I have formatted some text in my view.

但是我的格式化程序被调用了3次：

But my formatter is called 3 times:

1. 当我将模型绑定到面板控件时： oPanel.setModel（oModel， data ）;
sBirthday 和 sFormat 均为未定义。

在 onInit（）完成后，视图为渲染：
sBirthday 已正确估价，而 sFormat 是未定义

After onInit() is finished and the view is rendered: sBirthday is valorized correctly and sFormat is undefined

再次： sBirthday 和 sFormat ara正确地定了价。

Again: both sBirthday and sFormat ara valorized correctly.

为什么会这样？

应用程序出现错误，因为格式化程序中的 ageDescription（）无法管理 undefined 值。

Why does this happen? Is it correct?
The app get an error, because the ageDescription() in the formatter, can't manage undefined values.

formatter.js

sap.ui.define([], function () {
  "use strict";

  return {
    ageDescription : function (sBirthday, sFormat) {
      do.something();
      var sFromMyBd = moment(sBirthday, sFormat).fromNow();
      do.something();
      return sAge;
    }
  }
});

main.view.xml

<mvc:View
  controllerName="controller.main"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Panel id="user-panel-id">
    <Input id="name-input-id" enabled="false" value="{data>/user/name}" />
    <Label text="{i18n>age}: " class="sapUiSmallMargin"/>
    <Label text="{
      parts: [
        {path: 'data>/user/birthday'},
        {path: 'data>/user/dateFormat'}
      ],
      formatter: '.formatter.ageDescription' }"/>
  </Panel>
</mvc:View>

Main.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "model/formatter"
], function (Controller, JSONModel, formatter) {
  "use strict";

  return Controller.extend("controller.main", {
    formatter: formatter,
    onInit: function () {
      var oModel = new JSONModel();
      var oView = this.getView();
      oModel.loadData("model/data.json");
      var oPanel = oView.byId("user-panel-id");
      oPanel.setModel(oModel,"data");
      do.something();
    },
  });
});

data.json

data.json

{
  "user": {
    "name": "Frank",
    "surname": "Jhonson",
    "birthday": "23/03/1988",
    "dateFormat": "DD/MM/YYYY",
    "enabled": true,
    "address": {
      "street": "Minnesota street",
      "city": "San Francisco",
      "zip": "94112",
      "country": "California"
    }
  }
}

推荐答案

• 仅在数据请求完成时将模型设置为视图：

  • Set the model to the view only when the data request is completed:

    onInit: function() {
      const dataUri = sap.ui.require.toUri("<myNamespace>/model/data.json");
      const model = new JSONModel(dataUri);
      model.attachEventOnce("requestCompleted", function() {
        this.getView().setModel(model);
      }, this);
      // ...
    },
    

    这可确保格式化程序是仅调用一次（由 checkUpdate（ true ）调用，这在绑定初始化时发生；请参见下文），此后未检测到进一步的更改。

    This ensures that the formatter is called only once (invoked by checkUpdate(true) which happens on binding initialization; see below), and no further changes are detected afterwards.

    （另外）使格式化程序更具防御性。像这样的东西：

    Additionally (or alternatively), make the formatter more defensive. Something like:

    function(value1, value2) {
      let result = "";
      if (value1 && value2) {
        // format accordingly ...
      }
      return result;
    }
    

  
  

  
  

  为什么会这样？

  Why does this happen?

  
  
  

  
  
  1. 查看
  调用Controller的
  
  2. onInit 。在这里，请求文件 model / data.json （模型为空）。
  
  
  3. 在将视图添加到UI UI5之后将现有的父
     模型传播到视图。
  
  
  4. 初始化视图中的绑定，触发 checkUpdate（/ * forceUpdate * / true ） ^src 都在其中的每一个中。
  
  
  5. 由于 forceUpdate 标志被激活， change 事件被触发，即使没有任何改变也将强制触发格式化程序：
     
     [未定义，未定义] → [未定义，未定义] 。 -第一次格式化程序
  
  
  6. 获取 model / data.json 现在已完成。现在，该模型需要再次 checkUpdate 。
  
  
  7. [undefined，undefined] → [value1，未定义] →检测到更改→第二次格式化程序调用
  
  
  8. [value1，未定义] → [value1，value2] →检测到更改→第3 个格式化程序调用
  
  
  1. View gets instantiated.
  2. onInit of the Controller gets invoked. Here, the file model/data.json is requested (model is empty).
  3. Upon adding the view to the UI, UI5 propagates existing parent models to the view.
  4. Bindings within the view are initialized, triggering checkUpdate(/*forceUpdate*/true)^src in each one of them.
  5. Due to the forceUpdate flag activated, change event is fired, which forcefully triggers the formatters even if there were no changes at all:
     [undefined, undefined] → [undefined, undefined]. - 1st formatter call
  6. Fetching model/data.json is now completed. Now the model needs to checkUpdate again.
  7. [undefined, undefined] → [value1, undefined] → change detected → 2nd formatter call
  8. [value1, undefined] → [value1, value2] → change detected → 3rd formatter call

  这篇关于UI5：格式化程序从XML视图多次调用或过早的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！