javascript - this.getView() 在事件回调后返回 undefined

Question

在我的 ui5 Controller 中，我在 onBeforeRending 函数中调用我的方法。在该方法中，我调用 this.getView().getId() ，这是我正在使用的库所需要的，这很好:

onBeforeRendering: function () {
    this.func();
}, 

func: function() {
    this.getView().getId();
}

后来，我有一个 html 控件的 onClick 事件处理程序:

click: function () {
    const controller = sap.ui.controller("Project.controller.Controller");
    controller.func();
}

当从 controller.func 调用 this.getView() 时，我收到以下错误:

Uncaught TypeError: Cannot read property 'getId' of undefined
  func
  click 

我意识到这意味着 getView() 返回 undefined，但我不确定为什么。在第二次调用中检查 func 内部的 this 引用表明它可以访问 Controller 中的其他函数，但不能访问 getView。

编辑:

我通过将 View 绑定(bind)到变量然后在单击回调中捕获它来解决这个问题。

let view = this.getView()

然后稍后

click: function() {
    const controller = sap.ui.controller("Project.controller.Controller");

    controller.getView = function () {
        return view;
    };

    controller.func();
} 

Answer 1

尝试回答，因为评论中有太多内容需要补充。

如果您使用第三方库，将代码包装在自定义控件中通常仍然有用。该控件随后可以在各种其他应用程序中重用，并且允许从控件外部绑定(bind)数据和处理程序，如您放置控件的 View 的 Controller 所提供的。

此外，如果您使用 SAPUI5 而不是 OpenUI5，您将可以访问 VizFrame这是 D3 的 UI5 包装器(它将取代这个解决方案)。

这是自定义控件的骨架代码。替换路径和命名空间等:

sap.ui.define(
  ['sap/ui/core/Control', '../path/to/highcharts'],
  function(Control) {
    "use strict";

    return Control.extend("my.namespace.graph", {
      metadata: {
          events : {
            "graphClick" : {}
          }
      },

      init: function() {
        //initialisation. 
      },

      renderer: function(element, control) {
        element.write(`<div id="my-graph"></div>`);
      },

      onAfterRendering: function() {
        //do whatever you need to bind a handler to your graph. You can call a function on 
        //this control like this.onClick, below. 
      },

      onClick: function(data) {
        this.fireGraphClick(data);
      }
    });
  });

您可以将此控件导入到 View 中并像使用任何其他控件一样使用它。 graphClick 就是您使用的:

<controls:graph graphClick="myControllerFunction" />

不要忘记将控件添加到 xml 命名空间...

您可以在UI5 documentation中找到有关自定义控件的更多信息。