Question

我有一个消息框。

MessageBox.show(sMessageText, {
                icon: icon ? icon : MessageBox.Icon.NONE,
                title: stitle ? stitle : "",
                actions: actions ? actions : MessageBox.Action.CLOSE,
                id: id ? id : "DefaultMessageBoxId",
                details: sFinalText ? sFinalText : "Error",
                styleClass: bCompact ? "sapUiSizeCompact" : "",
                onClose: function (oAction) {
                        if(oAction === CLOSE)
                        {
                        this.okFunction();
                        }
                },

当用户单击消息框内的“关闭”按钮时，我要调用名为“ okFunction”的函数，该函数与消息框位于同一控制器文件中。

问题是，如果我在消息框外尝试this.okFunction，它会很好地工作。但是，在消息框的onClose方法内，显示“ this.okFunction不是函数”。如何在onClose方法上调用函数？

谢谢。

Answer 1

只需使用bind(this)

将上下文绑定到您的匿名函数

onClose: function (oAction) {
   if(oAction === CLOSE)
   {
      this.okFunction();
   }
}.bind(this)

这是一个有效的代码段

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <title>MVC with XmlView</title>

  <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>

  <script id="view1" type="sapui5/xmlview">
    <mvc:View controllerName="myController" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" xmlns="sap.m">
      <Button text="show messageBox" press="onPress"></Button> 
    </mvc:View>
  </script>


  <script>
    sap.ui.define([
      "sap/ui/core/mvc/Controller",
      "sap/m/MessageBox"
    ], function(Controller, MessageBox) {
      "use strict";

      return Controller.extend("myController", {
        onPress: function() {
          var sMessageText = "Message Text";
          var icon, stitle, actions, id, sFinalText, bCompact;
          MessageBox.show(sMessageText, {
            icon: icon ? icon : MessageBox.Icon.NONE,
            title: stitle ? stitle : "",
            actions: actions ? actions : MessageBox.Action.CLOSE,
            id: id ? id : "DefaultMessageBoxId",
            details: sFinalText ? sFinalText : "Error",
            styleClass: bCompact ? "sapUiSizeCompact" : "",
            onClose: function(oAction) {
              if (oAction === "CLOSE") {
                this.okFunction();
              }
            }.bind(this),
          });
        },

        okFunction() {
          alert("okFunction was executed")
        }
      });
    });

    // instantiate the View
    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    }); // accessing the HTML inside the script tag above

    // put the View onto the screen
    myView.placeAt('content');
  </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>

Answer 2

输入新的function，the value of this tends to change时。您应该将this的值存储在一个临时变量中，并使用该变量：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageBox"
], function(Controller, MessageBox) {
  "use strict";

  return Controller.extend("myController", {
    showMessage: function() {
      var sMessageText = "MessageBox content",
        icon, stitle = 'Sample',
        actions, id, sFinalText,
        bCompact = false;

      var oController = this;    //  <----- Save in temp variable
      MessageBox.show(sMessageText, {
        icon: icon ? icon : MessageBox.Icon.NONE,
        title: stitle ? stitle : "",
        actions: actions ? actions : MessageBox.Action.CLOSE,
        id: id ? id : "DefaultMessageBoxId",
        details: sFinalText ? sFinalText : "Error",
        styleClass: bCompact ? "sapUiSizeCompact" : "",
        onClose: function(oAction) {
          if (oAction === MessageBox.Action.CLOSE) {
            oController.okFunction();   // <----- Use the variable
          }
        }
      });
    },

    okFunction: function() {
      alert('OK')
    }
  });
});

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="Open MessageBox" press=".showMessage" />
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>

</html>

此方法的一个小优点是，嵌套函数中的this值仍然保持可用（指的是传递给show函数的对象）。

另一种替代方法是使用arrow function，但这仅在最近的浏览器中有效。

从消息框内的同一控制器访问功能名称

2 个答案: