如何在XML视图中向事件处理程序传递参数 SAP UI5

15

我在将XML视图中的数据发送到控制器时遇到了麻烦。 在JS视图中很容易实现。

例如:

在JS视图中:

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

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

<Button text="click" tap="callFunction"/>
上面的代码只会传递事件而不是"mycustomString"。我该如何做到这一点?
4个回答

23
你可以通过在视图中添加自定义data参数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"));
}

日志 数据: mycustomString

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


18

这是一个老问题,但是从版本1.56开始,XML Views现在原生支持直接传递参数给处理程序函数。

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

当将事件处理程序分配给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>


0
为什么不使用函数包装器?
<Button text="click" tap="callFunctionWrapper"/>


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

0
您可以通过在您在tap中声明的函数中调用另一个函数来实现这一点。

XML 视图:

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

在 Controller.js 中的代码:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接