具有不同控制器的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处理。

我不想复制事件处理程序代码或在每个Controller中实现处理程序来链接/移交工作，而是要声明一个共享事件处理程序。

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

  

始终假定以点（'。'）开头的名称代表控制器中的方法。

     

假定在稍后位置包含点的名称表示全局函数，并通过使用全名调用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

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

尝试这样的事情：

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

还记得把对象放在正确的目录中。

Answer 2

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

确保您的sap.ui.define之前已被调用

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

如果你查看_resolveEventHandler功能，它会带你here执行jQuery.sap.getObject。

Answer 3

UI5 1.69 +

从1.69版本开始，在XML视图/片段定义中共享JS模块变得更加容易。 ^doc

这里是一个示例：https://embed.plnkr.co/5G80I5HWObCuM5cG

<mvc:View controllerName="..."
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  core:require="{ myHandler: 'demo/shared/handler' }"
>
  <Button xmlns="sap.m" text="Press" press="myHandler($controller)" />
</mvc:View>`

     

^{关于myHandler($controller)语法，请参见https://ui5.sap.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe}

我们可以看到，即使处理程序本身与控制器分离，每个按钮也会根据视图显示不同的消息。

---

1.68及以下

处理程序

sap.ui.define([], function() { // location: "./shared/handler.js" with resourceRoots='{"my": "./"}'
  "use strict";

  return function(event) {
    // handle event ...
  };
}, /*export*/true); // <-- IMPORTANT! Exports it under the global name "my.shared.handler"

使处理程序全局可用

例如 Component.js ：

sap.ui.define([
  // ...,
  "my/shared/handler", // <-- trigger defining the module, making it globally available
], function(/*...*/) {/*...*/});

或在 index.html 中：

data-sap-ui-resourceroots='{"my": "./"}'
data-sap-ui-modules="my/shared/handler"

查看

<Button press="my.shared.handler" /> <!-- it's now accessible -->