如何在 XML 视图 SAP UI5 中将参数传递给事件处理程序答案

【问题标题】：How to pass parameters to a event handlerr in XML Views SAP UI5如何在 XML 视图 SAP UI5 中将参数传递给事件处理程序
【发布时间】：2014-09-30 06:55:26
【问题描述】：

我在将数据从 XML 视图发送到控制器时遇到问题。在 JS 视图中很容易实现。

例如：-

在 JS 视图中：-

var btn = new sap.m.Button({
    text:"click",
    tap:function(){
          callFunction(oEvent, "mycustomString");
    }
});

如何使用 XML 视图实现同样的效果。

<Button text="click" tap="callFunction"/>

以上只会传递事件而不是“mycustomString”。我该怎么做？

【问题讨论】：

标签： parameter-passing sapui5

【解决方案1】：

您可以通过在视图中添加自定义数据参数app:myData 来做到这一点：

查看

<mvc:View
    ...
    xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
    ...
>
    <Button text="click" tap="callFunction" app:mydata="mycustomString"/>
    ...

控制器

callFunction: function(oControlEvent) {
    console.log("data: " + oControlEvent.getSource().data("mydata"));
}

日志data: mycustomString

见https://scn.sap.com/thread/3538029

【讨论】：

【解决方案2】：

这是一个老问题，但是as of version 1.56 现在原生支持直接在 XML 视图中将参数传递给处理函数。

新的事件处理程序参数语法

当事件处理程序被分配给 XML 视图中的控制事件时，您现在还可以指定可以传递给事件处理程序的参数。参数可以是静态值，也可以是绑定，甚至是表达式。此功能有助于减少控制器代码并避免不必要的控制器方法，并将控制器逻辑与所需输入值的检索分开。

所以你现在可以简单地这样做：

<Button text="click" tap=".callFunction($event, 'mycustomString')" />

请注意，只要您传递了至少一个参数，事件本身将不再自动传递，因此您需要手动传递 $event，就像我在上面所做的那样。但是，还有其他语法可以直接传递事件参数、源代码控制和数据绑定，因此您可能根本不需要事件。

此功能的文档可通过Demo Kit 在线获取。

简短演示：

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("myController", {
    callFunction: function(sButtonText, sVal) {
      alert("Clicked " + sButtonText + " with value " + sVal);
    }
  });
});

sap.ui.xmlview({
  viewContent: $('#myView').html()
}).placeAt('content');

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
        <Button text="Button 1" press=".callFunction(${$source>/text}, 'ABCDEF')" />
        <Button text="Button 2" press=".callFunction(${$source>/text}, 'UVWXYZ')" />
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>

</html>

【讨论】：

【解决方案3】：

为什么不使用函数包装器？

<Button text="click" tap="callFunctionWrapper"/>


callFunctionWrapper: function(oEvent) {
      callFunction(oEvent, "mycustomString");
}

【讨论】：

【解决方案4】：

您可以通过调用您在 tap 中声明的函数中的函数来执行此操作。

XML 视图：

<Button text="Press Me" tap="doSomething"/>

Controller.js 中的代码：

doSomething : function(oEvent) {
          yourNewFunction(oEvent, "String"); //maybe this callFunction(oEvent, "mycustomString");
}

【讨论】：