具有不同控制器的XML视图的共享事件处理程序

Question

给定两个XML视图：

<mvc:View
  controllerName="my.namespace.controller.First"
  xmlns:mvc="sap.ui.core.mvc" 
  xmlns="sap.m">
  <Button press=".onBtnPress" />
</mvc:View>

<mvc:View
  controllerName="my.namespace.controller.Second"
  xmlns:mvc="sap.ui.core.mvc" 
  xmlns="sap.m">
  <Button press=".onBtnPress" />
</mvc:View>

不出所料，新闻事件由First.controller.js或Second.controller.js处理。

我想声明一个共享的事件处理程序，而不是复制事件处理程序代码或在每个控制器中实现处理程序来连锁/移交工作

根据文档，这应该是可能的，使用处理程序的命名约定：

总是假定以句点（'.'）开头的名称表示控制器中的方法。

在后面的位置包含一个点的名称被认为代表全局函数，并通过使用全名调用jQuery.sap.getObject来解析。

因此，我更改了处理程序并声明了一个共享对象，如下所示：

First.view.xml:

<Button press="my.namespace.Shared.onBtnPress" />

Shared.js:

jQuery.sap.declare("my.namespace.Shared");
  my.namespace.Shared = (function() {
    var onBtnPress = function() {
      console.log("button pressed");
    };
  return { onBtnPress : onBtnPress };
}());

视图初始化期间记录的警告（调试源）：

sap.ui.core.mvc.XMLView#__xmlview1:事件处理程序函数"my.namespace.Shared.onBtnPress"不是函数或不存在于控制器中。-

调用jQuery.sap.getObject("my.namespace.Shared")产生undefined

使用sap.ui.define使对象为已知对象时也会出现同样的问题。

Answer 1

自从UI5 1.69以来，在XML视图和片段中共享JS模块变得更加容易^doc

下面是一个示例：https://embed.plnkr.co/5G80I5HWObCuM5cG

<mvc:View controllerName="..."
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{ onButtonPress: 'my/shared/onButtonPress' }">
  <Button text="Press" press="onButtonPress" />
</mvc:View>

正如我们所看到的，每个按钮根据视图显示不同的消息，即使处理程序本身不包括在控制器定义中。

this上下文仍然是控制器实例，如主题处理XML视图中的事件:中所述

只要没有指定事件处理程序参数，并且无论在哪里查找函数，它都将以控制器作为上下文对象（this）执行。

Answer 2

您的碎片对象看起来很奇怪

试试这样的东西：

sap.ui.define([], function() {
  return sap.ui.base.Object.extend("my.namespace.Shared", function() {
    onBtnPress : function() {
      console.log("button pressed");
    }
  };
});

还要记住将对象放在正确的目录中。

Answer 3

我能够复制粘贴您的sap.ui.define，并验证它是正确创建的jQuery.sap.getObject。

请确保您的sap.ui.define在渲染视图之前已被调用

您可以在XMLTemplateProcessor中设置一个断点，在这里处理XML视图的事件回调，以解决进一步的调试/计时问题。

如果您查看_resolveEventHandler函数，它会将您带到此处，它将执行jQuery.sap.getObject。