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>

target仅具有QuickViewGroupElement属性，没有按下/单击事件。我想在点击事件中使用CrossApplicationNavigation服务。

我尝试使用attachBrowserEvent：

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

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

但是发现QuickViewGroupElement没有扩展sap.ui.core.Control，所以不要借用attachBrowserEvent。

那么我唯一的选择是在香草js中使用addEventListener还是在jQuery中使用.click()？还有其他UI5方式吗？

如果无法解决jQuery，则UI5中的QuickViewGroupElement id和DOM中的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 然后查询具有链接类型的页面和组元素。接下来，我使用jquery查找附加点击事件的链接。

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 + Link模仿QuickView

解决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。

我还发现QuickViewGroupElement不支持enabled。因此，Link是更好的选择。

解决3

ResponsivePopover + QuickViewPage +链接

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

如何为链接类型QuickViewGroupElement添加点击事件？

2 个答案:

解决1个@inizio问题：

解决2 @D。希思：

解决3