Framework7: Page State is Lost on Back Navigation when Navigating Back More Than 1 Page

[juminoz]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.6.4
• Platform and Target: iOS

What you did

Use router.loadContent() to load content for new pages. Page A > Page B > Page C. Content of Page A is also loaded dynamically. There are also events assigned to DOM elements of each page with scope (not global).

Expected Behavior

When clicking back twice, Page A should be back in the center with existing content and events assigned to it.

Actual Behavior

Content of Page A disappeared. Page A is essentially reverted back to original state before content is loaded and events are assigned.

Expected Solution

Give developer control the stage of pages retained in the cache. The latest stage of the page should be cached instead of original state. If developer wanted to reload the page, they would have force it to reload especially when that option already exists in the framework.

[marti1125]

I have the same error the navbar with the index.html web.html is duplicated
it generated two navbar =??

[lavacaballero]

I have a similar issue. I'm using nested views (using tabs) and have very tight control of which view (nested or not) is currently on screen.
When I load a page using view.router.loadContents(), Page A is added fine, Page B is added fine, but when I load Page C, Page A is removed completely from DOM, so there's nothing to go back from Page B. Yet it is kept on the view's history!
I'm opting to show the contents of Page C in a popup so I don't get the first page removed.

[J05HI]

Same problem here :(

[juminoz]

Let me be clear that I understand why it's being done. Browser generally downgrades in performance when there's too many DOM elements on the page til it pretty much freezes (last I tested in 2012 was 100k+, not sure what it is now). What I would typically do is detach it without unassign events so that I can just reattach it back. Since it's only in memory (stored in a variable), the browser doesn't have any issues (well, to a certain extent, but much more than keeping everything in the DOM). What I'm seeing in the behavior of Framework7 is that Page A is inserted back into the page with the cached HTML string rather than HTML element. So even if you cache the final state of the page as HTML string, all the events will still be lost. One workaround is to assign all events at the view-level, which is a very bad idea when you have a rather complex app since there will be conflicts everywhere.

Since I'm very new to Framework7, I couldn't determine whether this is a bug. All I know is how it behaves based on debugging through the code.

I really hope I don't have to write a wrapper to manage the state. I can't randomly use popup since it simply makes no sense from UX stand point.

[nolimits4web]

You can just enable domCache view’s parameter and it will keep all the previous pages in DOM. In v2 same parameter called stackPages

[juminoz]

@nolimits4web Thanks. That works very well for me.

[lavacaballero]

@nolimits4web that partially does the trick, but seems to have a bug... my pages have nested navbars and while the first page is kept, the navbar is removed from the view. Any hint?

[nolimits4web]

Issue is closed because of outdated, irrelevant or not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue