具有不同控制器的XML视图的共享事件处理程序 [英] Shared event handler for XML views with different controllers

问题描述

给出两个XML视图:

 < mvc:查看controllerName ="my.namespace.controller.First"；xmlns:mvc ="sap.ui.core.mvc"xmlns ="sap.m"<按钮按下=.onBtnPress"；/></mvc:View>< mvc:查看controllerName ="my.namespace.controller.Second"xmlns:mvc ="sap.ui.core.mvc"xmlns ="sap.m"<按钮按下=.onBtnPress"；/></mvc:View> 

按预期，新闻事件由 First.controller.js 或 Second.controller.js 处理.

我想声明一个共享的事件处理程序，而不是在每个Controller中复制事件处理程序代码或在每个Controller中实现处理程序，以链结/交出工作.

根据 docs 应该可以对处理程序使用命名约定:

始终假定以点('.')开头的名称表示控制器中的方法.

假定在更高位置包含点的名称表示全局函数，并通过使用全名调用jQuery.sap.getObject进行解析.

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

First.view.xml:

 <按钮按下="my.namespace.Shared.onBtnPress"/> 

Shared.js:

  jQuery.sap.declare("my.namespace.Shared");my.namespace.Shared =(function(){var onBtnPress = function(){console.log(按下按钮")；};返回{onBtnPress:onBtnPress};}()); 

在视图初始化期间记录的警告(调试源):

sap.ui.core.mvc.XMLView #__ xmlview1:事件处理函数"my.namespace.Shared.onBtnPress"；不是功能或控制器中不存在.-

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

使用 sap.ui.define 公开对象时出现相同的问题.

解决方案

UI5 1.69 +

从1.69版本开始，在XML视图和片段中共享JS模块变得更加容易. ^{https://embed.plnkr.co/5G80I5HWObCuM5cG}

 <代码>< mvc:View controllerName ="..."xmlns:mvc ="sap.ui.core.mvc"xmlns:core ="sap.ui.core" core:require ="{myHandler:'my/shared/handler'}" ><按钮xmlns ="sap.m" text ="Press" press =" myHandler( $ event，$ controller )"/></mvc:View>  

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

要了解有关可以传递哪些参数的更多信息(例如 $ controller ， $ event ，...)，请参见传递参数"部分.在文档主题 在XML视图中处理事件 ./p>

---

UI5 1.68及以下

1. 定义处理程序并以全局名称将其导出:

    //在"./shared/handler.js"中带有resourceroots ='{'my'::'./'}'sap.ui.define([]，function(){严格使用"；返回函数(事件){//这里`this` ==控制器实例};}，/* export */true);//<-以全局名称"my.shared.handler"导出该文件； 

2. 使处理程序全局可用，例如，在 Component.js 和/或 index.html 中:

     sap.ui.define([//例如在Component.js中//...，"my/shared/handler"，//触发定义模块，使其在全球范围内可用]，/*...*/); 

    //或在index.html中data-sap-ui-resourceroots ='{'my':: ./'}'data-sap-ui-modules =我/共享/处理程序"； 

3. 使用现在可全局访问的事件处理程序，而无需前导点(.):

    < Button press =" my.shared.handler"/> 

Given two XML Views:

<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>

As expected, the press event is handled by First.controller.js or Second.controller.js.

Instead of duplicating the event handler code or implementing handlers in each Controller to chain/hand off the work, I want to declare a shared event handler.

According to docs this should be possible, using a naming convention for the handler:

Names starting with a dot ('.') are always assumed to represent a method in the controller.

Names containing a dot at a later position are assumed to represent global functions and are resolved by calling jQuery.sap.getObject with the full name.

So I change the handler and declare a shared object, like so:

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

Warning logged (debug sources) during view initialisation:

sap.ui.core.mvc.XMLView#__xmlview1: event handler function "my.namespace.Shared.onBtnPress" is not a function or does not exist in the controller. -

Calling jQuery.sap.getObject("my.namespace.Shared") yields undefined

Same issue when using sap.ui.define to make the object known.

解决方案

UI5 1.69+

Since 1.69, it's become easier to share JS modules in XML view and fragment.^doc

Here is an example: https://embed.plnkr.co/5G80I5HWObCuM5cG

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

As we can see, each button displays a different message depending on the view, even though the handler itself is separated from the controllers.

To learn more about which arguments can be passed (e.g. $controller, $event, ...), see the section "Passing Parameters" under the documentation topic Handling Events in XML Views.

---

UI5 1.68 and below

1. Define the handler and export it under a global name:

   // In "./shared/handler.js" with resourceroots='{"my": "./"}'
   sap.ui.define([], function() {
      "use strict";
   
      return function(event) {
        // Here `this` == controller instance
      };
    }, /*export*/true); // <-- Exports it under the global name "my.shared.handler"
   

2. Make the handler globally available, for example, in Component.js and/or in index.html:

   sap.ui.define([ // e.g. in Component.js
      // ...,
      "my/shared/handler", // trigger defining the module, making it globally available
    ], /*...*/);
   

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

3. Use the now globally accessible event handler without a leading dot (.):

   <Button press="my.shared.handler" />
   

这篇关于具有不同控制器的XML视图的共享事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！