UI5:从 XML 视图多次或过早调用格式化程序

问题描述

我使用的是 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 都是 undefined.

在 onInit() 完成并渲染视图后:sBirthday 被正确赋值并且 sFormat 是 undefined

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;
    }
  }
});

ma​​in.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

{
  "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;
    }
    

  为什么会发生这种情况?

  1. 视图被实例化.
  控制器的
  2. onInit 被调用.在这里，请求文件 model/data.json(模型为空).
  3. 将视图添加到 UI 后，UI5 会传播现有的父级模型到视图.
  4. 视图内的绑定被初始化，触发checkUpdate(/*forceUpdate*/true)
  5. 由于激活了 forceUpdate 标志，会触发 change 事件，即使根本没有任何更改，也会强制触发格式化程序:
     [未定义，未定义] → [未定义，未定义].- 第一次格式化程序调用
  6. 获取model/data.json 现已完成.现在模型需要再次checkUpdate.
  7. [undefined, undefined] → [value1, undefined] → 检测到变化 → 2nd 格式化程序调用
  8. [value1, undefined] → [value1, value2] → 检测到变化 → 3rd 格式化程序调用
  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 parentmodels to the view.
  4. Bindings within the view are initialized, triggering checkUpdate(/*forceUpdate*/true) 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 视图多次或过早调用格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！