如何为link类型的QuickViewGroupElement添加点击事件？

Question

我有一个像这样的 QuickView 弹出窗口：

<core:FragmentDefinition id="table_popover">
  <QuickView id="popover_quickView">
    <QuickViewPage id="popover_quickViewPage">
      <QuickViewGroup id="popover_quickViewGroup">
        <QuickViewGroupElement
          id="nav_link"
          type="link"
          value="navTo somePage" />
      </QuickViewGroup>
    </QuickViewPage>
  </QuickView>
</core:FragmentDefinition>

QuickViewGroupElement只有target属性，没有press/click事件。我想在点击事件中使用 CrossApplicationNavigation 服务。

我尝试使用 attachBrowserEvent:

var oLink = sap.ui.core.Fragment.byId("AssignedTablePopover", "nav_link");

oLink.attachBrowserEvent("click", function() {
  console.log("click");
});

但是发现QuickViewGroupElement没有extends sap.ui.core.Control，所以不要借attachBrowserEvent.

所以我唯一的选择是在 vanilla js 中使用 addEventListener 还是在 jQuery 中使用 .click()？还有其他UI5种方法吗？

事件 jQuery 解决方法无效，UI5 和 DOM 中的 QuickViewGroupElement id 不一样，就像这个 Plunker Demo:

var oView = this.getView();
var oLink = oView.byId("nav_link");
var sId = oLink.getId(); // "idFirstPage1--nav_link"

// get nothing
var jQueryLink = $("#" + sId); 
var vanillaLink = document.getElementById("document.getElementById("idFirstPage1--nav_link")")

// returns link element, in real application, generated id might be __linkXXX
var realjQueryLink = $("__link0");
var realvanillaLink = document.getElementById("__link0");

QuickView 的唯一 ID 很奇怪，我在 github 中为 UI5 创建了一个问题：OPENUI5 issues

UI:

Answer 1

是的，这是一件复杂的事情。这是您可以尝试的方法

我已将 afterOpen 事件附加到函数 quickViewOpen 然后我查询具有 link 类型的页面和组元素。接下来，我使用 jquery 寻找 link 来附加点击事件。

Working example - jsbin

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
    <Button text="Click" press="openQuickView"></Button>
    <QuickView id="popover_quickView" afterOpen="quickViewOpen">
      <QuickViewPage id="popover_quickViewPage">
        <QuickViewGroup id="popover_quickViewGroup">
          <QuickViewGroupElement
            id="nav_link"
            type="link"
            value="navTo somePage" />
          <QuickViewGroupElement
            id="nav_link2"
            type="link"
            value="navTo otherPage" />
      </QuickViewGroup>
      </QuickViewPage>
    </QuickView>
  </mvc:View>
    </script>
    <script>
      sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
      ], function(jQuery, Controller, JSONModel) {
        "use strict";

        var oController = Controller.extend("myView.Template", {
          openQuickView: function(oEvent) {
            var quickview = this.getView().byId("popover_quickView");
            quickview.openBy(oEvent.getSource());
          },
          quickViewOpen: function() {
            var fn = this.quickViewLinkClick; // event handle
            var oQuickView = this.getView().byId("popover_quickView");

            // get the link elements so that we can associate the values with the link click
            var linkElements = oQuickView.getPages()[0].getGroups()[0].getElements().filter(function(e) {
              return e.getType() === 'link';
            });

            // use jquery to look for the links and attach on click event
            this.getView().byId("popover_quickView").$().find("a.sapMLnk").each(function(i, e) {
              var elm = linkElements[i];
              $(e).click(function() {
                fn(elm);
              });
            });
          },
          quickViewLinkClick: function(elm) {
            console.log(elm.getValue());
          }
        });

        return oController;
      });

      var oView = sap.ui.xmlview({
        viewContent: jQuery('#oView').html()
      });

      oView.placeAt('content');
    </script>
  </head>

  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

Answer 2

解决 1 @inizio:

使用 Popover + Form + 模仿 QuickView Link

解决 2 @D。谢：

var oQuickView = sap.ui.core.Fragment.byId("AssignedTablePopover", "common_quickView");
// unique id workaround
var oNavLink = jQuery.sap.byId(oQuickView.getId() + "-quickView-popover").find('a')[0];

jQuery.sap.byId(oNavLink.getAttribute('id')).click(function(e) {

});

UI 团队已将其批准为 feature request。

I also found QuickViewGroupElement did not support enabled. So Link is a better choice.

解决 3

ResponsivePopover + QuickViewPage + Link

<ResponsivePopover
  showHeader="true"
  title="{entityPopoverModel>/name}"
  class="sapUiPopupWithPadding" initialFocus="pin">
  <content>
    <!-- do not add QuickView container-->
    <QuickViewPage header="{entityPopoverModel>/name}">
      <QuickViewGroup>
        <QuickViewGroupElement
          label="{i18n>ID}"
          value="{entityPopoverModel>/id}" />
        <QuickViewGroupElement
          label="{i18n>DESCRIPTION}"
          value="{= ${entityPopoverModel>/description} ? ${entityPopoverModel>/description} : '-'}" />
      </QuickViewGroup>
    </QuickViewPage>
    <Link text="hazard" press="onPress" enabled="false"/>
  </content>
</ResponsivePopover>

如何为link类型的QuickViewGroupElement添加点击事件？

How to add click event for link type QuickViewGroupElement？

sapui5

popover

解决 1 @inizio:

解决 2 @D。谢：

解决 3