How to use keepAlive on initial pages?

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

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

2 Likes

Hi am also encountering the same problem any solution. And what I have realized is that Framework 7 only keeps two pages in view router’s navigation history and if you go beyond two pages the most recent page " most especially the home is removed from the history and Dom ".
As I was reading through the forum earlier versions supported the starkPages view parameter but now it is deprecated
As Mr.vald mentioned keep alive only works for the dynamically loaded pages and not for initial pages like pages in views so am also stark

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

Didn’t work for me. Anybody has a solution to this yet?

Hello Mr. michael_a
After months of struggling alone I found the solution. I almost quite Framework 7 because of this but luckily i found the answer. The solution is using keepAlive. How ?
Well you should load your initial pages dynamically instead of just placing them directly in your index.html.
Example lets assume you have tabbed view pages for your ecommerce store. Your index.html should look like this.

<div class="views tabs safe-areas">
  <div class="toolbar toolbar-bottom tabbar-icons">
    <div class="toolbar-inner">
      <a href="#home" class="tab-link tab-link-active no-ripple">
        <i class="icon material-icons if-md">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#search" class="tab-link no-ripple">
        <i class="icon material-icons if-md">search</i>
        <span class="tabbar-label">Search</span>
      </a>
      <a href="#cart" class="tab-link no-ripple">
        <i class="icon material-icons if-md">shopping-cart</i>
        <span class="tabbar-label">Cart</span>
      </a>
    </div>
  </div>
  <!-- main home view -->
  <div id="home" class="view view-main view-init tab tab-active" data-name="home_page" data-url="/home/">
  </div>
  <!-- main2 search view -->
  <div id="search" class="view view-init tab" data-name="search_page" data-url="/search/"></div>
  <!-- main3 cart view -->
  <div id="cart" class="view view-init tab" data-name="cart_page" data-url="/cart/"></div>

</div>

Note how we used data-name="cart_page" data-url="/cart/" instead of inserting the content directly. So now we are loading our pages dynamically.
Well then create separate pages home.html, search.html and cart.html and insert content in these pages as required.
So your app config should look like this

var app = new Framework7({
    name: "myAwesomeStore", // App name
    mdTouchRipple: false,
    colors: {
      primary: "#800080",
    },
    el: "#app", // App root element
    // other params here
    routes: [
      // main views routes
      {
        path: '/home/',
        url: 'path/to/home.html',
        keepAlive: true,
      },
      {
        path: '/search/',
        url: 'path/to/search.html',
        keepAlive: true,
      },
      {
        path: '/cart/',
        url: 'path/to/cart.html',
        keepAlive: true,
      },
    ]
  })

As you can see we used keepAlive on each of the pages. The data-url we used in our index.html is the path.
So thats how i solved this and it worked for me. Give a go and if you need clarifications pliz ask. Have a nice day.

Hello. Thank you for this, it works!

But now my tabs don’t work correctly when i use browserHistory in view
I found a similar issue here (BrowserHistory didn’t work properly in tabbed app created by CLI)

If you have a solution for this as well.
Thank you again for your response. Have a nice day

Hello am glad to hear it worked.
I personally have not used browser history in any of my work.
But according to the issue. Mr. noLimits4web points out the browser history only works for one view not tabbed views