When using the router, page reload problem.

[Former Member]

Now I'm using router with component.js and MyRouter.js file. However i have some problem.

First i click a page menu, it calls oninit() function correctly. but when i click a page menu at second times, onInit() function doesn't work.

How can i refresh page every time i click the page menu?

[ugurkaya]

Hey John,

You could use attachMatched / attachPatternMatched event for this purpose. It is triggered every time when page is displayed. For example on your detail page you can attach a function to be called everytime like this:

onInit : function() {

  this.getRouter().getRoute("detail").attachMatched(this.onRouteMatched, this);

},

onRouteMatched: function(oEvent){

// clear fields

}

[former_member197071]

Hi Ugur,

Thanks but I m getting following error:

I am inside onRouteMatched()

Uncaught TypeError: I.fFunction.call is not a function

However it is successfully triggering method onRouteMatched() because it has returned the text which I wrote inside onRouteMatched() using console.log("I am inside onRouteMatched()").

[ugurkaya]

Hey Ankur,

Is there any further information on the error log?

It is hard to tell what causes this error. You may want to check recent modifications on the application.

Regards

Ugur

[former_member197071]

Hello Ugur,

It was my typo  mistake, I wrote

this.getRouter().getRoute("detail").attachMatched(this.onRouteMatched(), this);

instead of

this.onRouteMatched

Thanks for your help

[jibin_joy]

Hi John ,

These are life cycle methods .

• init()

Initializes the element instance after creation.

Applications must not call this hook method directly, it is called by the framework while the constructor of an element is executed.

Subclasses of Element should override this hook to implement any necessary initialization.

• onBeforeRendering()

Function is called before the rendering of the control is started.

Applications must not call this hook method directly, it is called by the framework.

Subclasses of Control should override this hook to implement any necessary actions before the rendering.

• onAfterRendering()

Function is called when the rendering of the control is completed.

Applications must not call this hook method directly, it is called by the framework.

Subclasses of Control should override this hook to implement any necessary actions after the rendering.

• exit()

Cleans up the element instance before destruction.

Applications must not call this hook method directly, it is called by the framework when the element is destroyed.

Subclasses of Element should override this hook to implement any necessary cleanup.

     Once Page is navigated to first time then Page is created and above life cycle method are called .When navigation happens to second page then first page is not destroyed ( First page will be cached and In UI , it will be hidden ). So when comes back to first page again then new page is not created ( First Page visibility will be changed and Second Page will be hidden ) .

  It is similar behavior of jQuery Mobile https://jquerymobile.com/

Regards,

Jibin Joy

[junwu]

why?