Change DOM in new page before navigate

[luissanches]

I used ons-navigator and have some templates with lists, so
i’d like change list items before navigator animation. What is the best way?
I tried select by id, but the list still does not exist. I too tried pass options.pageHTML on pushPage method, but dont worked. I too tried filter prePush to change the innerHtml for the new template.
Has anyone ever experienced this and can help-me?

[]'s

[munsterlander]

@luissanches Just to make sure I understand, are you saying you have say two templates, A & B. A has a list with foo items and B has a list with bar items. You currently have A loaded in the navigator and you want to load B, but before you load B, you want A’s list to show B’s items?

[luissanches]

I load the lists of templates A and B dynamically. I use the callback method on “navigator.pushPage”, I access the “<ons-list>” list through the “document.getElementById” and add the items using “<ons-list-item>” with data received from a restful service.
The callback occurs after the navigation animation, and generates a perception that the screen “the list of items” has a delay.
I tried change list before push navigation or pass html with new list items, but does not work.

[munsterlander]

@luissanches Ah, ok. Why not just delay the animation as described in the docs here: https://onsen.io/v2/docs/js/ons-navigator.html#method-pushPage

{duration: 0.2, delay: 0.4, timing: 'ease-in'}

[Fran Diox]

@luissanches The callback or the promise run after the animation. This is the basic use case for page init event. It’s explained in the docs.

[munsterlander]

@Fran-Diox Thats good to know. I always assumed that the calls were synchronous. That pushPage animation was simply css and not connected to the actual JS. I guess I should have looked at core a bit better. Would it be possible to have a flowchart of the event lifecycle? I mean this is extremely low priority, but it would be good to know the lifecycle like how Vue did it.

[Fran Diox]

@munsterlander The page is attached to the DOM first and then the animation is run asynchronously, so init event can be handled before the animation since it is fired in the connectedCallback of the page. The show event timing is similar to the callback/promise and is handled after the animation. Data initialization should be done in init event because otherwise the user will see the page update.

The aimation itself is CSS but it requires to create and attach a new page before it with JS.

[luissanches]

@Fran-Diox Thanks very much, its work fine.