Lazy loading data after initial load

Question

In section 10 of the OpenUI5 Developer Guide tutorial on routing (see here), it talks about lazy loading. However the tutorial does not show how to lazy-load data.

Scenario: I have an OpenUI5 app that gives a list of employees and on a detail page shows the main employee details and gives access to further info, projects, hobbies, and notes from the selected employee's resume.

Because in 99.99% of the use cases a user will not wish to look at hobbies, I will prefer not to load hobbie data with the main model for the app. I make this choice based on performance concerns. Instead I will detect the user has requested to see hobbies and load the hobbies data for the current user into the model.

How would I do that ?

Edit: I managed to discover the onTabSelect() plumbing [tip to other confused folks, the OpenUI5 tutorials tend to leave stuff out to keep on topic - it is useful to look at the code of their working versions if you get lost]. After this the routing in the tutorial makes a lot more sense.

My question remains relevant but changes slightly to 'User clicks a tab and I am about to load further JSON data into the model. Should I do this in onInit() of the target controller or before navTo() is invoked to load the controller?' I can see an issue because of the async nature of the JSON fetch meaning if I use onInit() I could end up displaying the page controls before the data arrives.

What is the best practice please ? My money is on pre navTo() though that is an ugly pattern as I would have to repeat the JSON fetch elsewhere if I have another route to the lazy-loading view.

The how depends on your scenario. What kind of model are you using? Do you have already have a controller for the hobby view? — matbtt
I am using a JSON model. Yes I have a hobbies controller plus XML view.. — Vanquished Wombat

matbtt matbtt · Accepted Answer · 2016-10-27T07:40:04

To stick with the example. You can attach your HobbiesController in its onInit method to the display event of the target you are displaying:

var router = this.getOwnerComponent().getRouter();
var target = router.getTarget("resumeTabHobbies");
target.attachDisplay(this.onDisplay, this);

Then you define an onDisplay method which will be now called if you select the corresponding tab and populate your model there.

Lazy loading data after initial load

1 Answers