How to pass a string to controller method from html view in SAPUI5?

Question

I need to build a navigation with a dynamic route parameter from controller.

//user.controller.js

(function () {
  sap.ui.controller("app.User", {
    getNavUrl: function (tab) {
      return '#/users/+ this.userId + '/' + tab;
    }
  });
}());

//user.view.html
<div data-sap-ui-type="ui5strap.Nav" data-selection-mode="Single">
  <div data-sap-ui-type="ui5strap.ListNavItem" 
       data-selected="true"
       data-text="{i18n>Grants}" 
       data-href={getNavUrl('grants')}> <!-- cant make this to work! -->
  </div>

  <div data-sap-ui-type="ui5strap.ListNavItem"
       data-text="{i18n>Opportunities}" 
       data-href={getNavUrl('opportunities')}> <!-- cant make this to work! -->
  </div>

</div>

So, the way i'd do this in any MVC - is by passing a string to controller method from within view, but i can't seem to find a way to invoke controller method from view in sapui5.

Answer 1

You can invoke a method like this:

sap.ui.getCore().byId("idofviewhere").oController.onBeforeRendering();

In your case:

sap.ui.getCore().byId("idofviewhere").oController.getNavUrl(tab);

Answer 2

Did you try using SAPUI5's internal function handlers? Here is an example with a button press:

//user.controller.js

 (function () {
      sap.ui.controller("app.User", {


        navigateFoo: function (oEvent) {
             alert("you are now navigating. If you want to dynamically alter your destination, 
                    consider putting custom data into your UI object, and using 'oEvent.getSource()'
                    in the controller to get access to your UI object, and all custom data inside");
            }
      });
    }());

//user.view.html

<div data-sap-ui-type="sap.ui.commons.Button" id="myButton" data-text="Navigate" data-press="navigateFoo"></div>

In your case, you could check if your listnav items have a 'data-press' or equivalent you can use.