SAPUI5-Which method to call once a view is display

问题:

This question already has an answer here:

• How execute code every time that I view a page 3 answers

I want to do some logic before a view is displayed every time.I cannot go with before rendering method since it is called only once when the view is created and shown for the first-time.Pls help.Any ideas?

回答1:

Why do you think the before rendering method of a control is called only once? Do you have any sample code?

I've created a quick a dirty example on jsbin (http://jsbin.com/qikokayo/1/edit?html,output) for you to have a look at. It clearly shows that onInit is called once but onBeforeRendering is called every time...

Also see this snippet from the OpenUI5 SDK which explains:

Lifecycle Hooks

onInit() - Called when a View is instantiated and its controls (if available) are already created. Can be used to modify the View before it is displayed to bind event handlers and do other one-time initialization.

onExit() - Called when the View is destroyed. Use this one to free resources and finalize activities.

onAfterRendering() - Called when the View has been rendered (therefore its HTML is part of the document). Post-rendering manipulations of the HTML can be done here. This hook is the same one that SAPUI5 controls get after being rendered.

onBeforeRendering() - Is invoked before the Controller's View is re-rendered. You would use onInit() in the case that the hook shall be invoked only before the first rendering.

For Controllers without a View, no lifecycle hooks will be called.

回答2:

For a modern SAPUI5 fiori-style application involving a Component and associated routing you could always attach a method to your view that would be called whenever there is a match with the supplied route pattern for that view. This route was historically supplied in the metadata of the Component class but since v1.30 it's declared in the manifest.json file.

In the onInit method of your view, you can do:

onInit: function() {
    this._oRouter = this.getOwnerComponent().getRouter();
    this._oRouter.getRoute("yourRouteForThisView").attachPatternMatched(this._onObjectMatched, this);
}

So you have the _onObjectMatched method that would be called every time you are on the view. Here you could place all your code here that should execute before your view is rendered.

_onObjectMatched: function(oEvent) {
    var oArgs = oEvent.getParameter("arguments");
    //If any values were passed in the URL then those will be available in oArgs
    //Do other stuff here
}

You can also use this for your landing page. The first view usually has an empty string "" as its route pattern in the manifest.

回答3:

Another pattern is as below (with thanks to Matbtt)

onInit : function () {

    //...other code

    var router = this.getOwnerComponent().getRouter();
    var target = router.getTarget("<your route target name>");
    target.attachDisplay(this.onDisplay, this);
},

/** Fires evey time view is displayed.
 *
 * @param oEvent
 */
onDisplay: function(oEvent) {

    console.log('refreshData')
    this._refreshData()
},      

The onDisplay function is fired each time the view is displayed. In my own small experience the on-render events get fired more frequently than one would initially assume.

回答4:

I have fixed the issue with onBeforeShow.Thanks jason for your efforts.

回答5:

I can give you an answer, but only related to the old approach of navigation in UI5. But maybe you used that as a starting point too and have the same problem as me.

Here a JSBin with the controller that handles navigation from Master to Detail view -> http://jsbin.com/xomuvi/2/edit

In there you can see the call:

page.rerender();

It's triggering both the onBeforeRendering and onAfterRendering event again.

But calling to for the first time triggers the events two times, take care of that.