How to use keepAlive on initial pages?

Questions
1

I have an app with a basic structure (Views as Tabs, with each tab containing a page)

Like:

<div class="view view-init tab" id="tab-2">
    <div class="page">Page content here</div>
</div>

Some data is fetched and inserted inside the page.

When I navigate to a new page and go back, the data is still here. But when I navigate 2 page deeper (home → page2 → page3 → back → back) then the data is not there anymore.

I understand that I have to use keepAlive: true (and it works well for traditional routes) but my question is how do I use the keepAlive parameter on “initial” pages, the ones that are already in the DOM in index.html when the app is initialized, and not dynamically loaded with routes? I tried data-keep-alive=“true” on the div tag but it doesn’t work.

3 Likes
2

I would like to bring this to the top. I would like to understand the solution or workaround for this problem.

2 Likes
4

Hi, I had this problem in the past if I’m not mistaken in version 5 of f7, to find a solution that still works today, follow the same code, to understand how the routing works in f7 it loses the data reference when we navigate further bottom
solution:

var device = Framework7.getDevice();
var app = new Framework7({
version: “1.0.1”,
// App store
// store: store,

// App routes
routes: routes,

// fo solution use this
view: {
browserHistory:true,
pushStateSeparator:‘’,

pushState: true,
preloadPreviousPage: false, 
stackPages: true,

// reloadAll: true,
// reloadCurrent: true,
// ignoreCache: true,   
// reload:true,
// animate:false

},
…

1 Like