How to trigger click event for html anchor tag on xml view SAP UI5

问题

I am trying to combine XMLView & standard html. On xml view, we can use press="onDoSomething" attribute & onDoSomething : function(){} on app.controller.js to trigger click event. But how to trigger it on html. Here is my code

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="banalyzer.controller.App" xmlns:html="http://www.w3.org/1999/xhtml"
    displayBlock="true">
    <App id="BA_APP">
        <pages>
            <HBox width="100%" height="100%" id="header_container">
                <items>
                    <Image class="logo" src="../images/logo_new.png"/>
                    <Image class="header" src="../images/header-bg.png"/>
                </items>
                <html:ul class="tab">
                    <html:li>
                        <html:a href="#" onclick="onBud()" class="tablinks active">Budget Analyzer</html:a>
                    </html:li>
                    <html:li>
                        <html:a href="#" onclick="spend()" class="tablinks">Spend Analyzer</html:a>
                    </html:li>
                </html:ul>
            </HBox>
        </pages>
    </App>
</mvc:View>

回答1:

The html elements are copied by the XMLView into the page on rendering of the View. As they are not UI5 controls but html dom elements, the events and properties will not be processed. So the code in your onclick events will be copied untouched to the output page.

When the user clicks on such a link, the code will be executed in the global window context. There is no easy way to find the UI5 View instance that has rendered the link and its Controller instance where your want to call a method.

The easyest way to attach html events to a controller method would be to give the html elements an id and bind the events in your controllers onAfterRendering method:

  onAfterRendering:function(){
    jQuery("#"+this.createId("link1")).on("click",this.onLinkPressed.bind(this));
    jQuery("#"+this.createId("link2")).on("click",this.onLinkPressed.bind(this));
  },

Example on JSBin.

来源：https://stackoverflow.com/questions/37748599/how-to-trigger-click-event-for-html-anchor-tag-on-xml-view-sap-ui5

标签

html5

sapui5

sap-fiori