On back page init firing

1

Hi, I have a similar issue to this question

Now I don’t have routable tabs, instead I do an on-click event that calls

app.views.main.router.navigate(’/mainHome/’, {reloadAll: true,animate:true});

From there I have

$$(document).on(‘page:init’, ‘.page[data-name=“homeMain”]’, function (e){
//run code
}

Now this works, however when I go back using

app.views.main.router.back()

It goes back one page and fires the page init, however I would expect the page to be cached and not to fire off the page init code again. I have been looking around the docs to see if there is anything to prevent this but have not been able to find anything that would do so.

Thanks

2

Did you try with keepAlive true? That should keep page in dom.

3

So I tried that, however the issue there is it won’t update on the next change, essentially I am just looking to preserve state for back but going forward it should fire the init if that make sense.

So forward navigation (clicking buttons, loading detail pages) should fire init to get the latest however going back should be like browser back / cache, no need to fire init again, just load cached page but if we click the button again it should fire init because we want to generate the correct content.

4

Hi,

In order to do that you should enable page stacks.

To do so add this stackPages: true to the app init:

// Framework7 App main instance
var app = new Framework7({

view: {
stackPages: true
},

});

1 Like
5

Hi Firas_Sleibi,

Thanks for the reply.

I added the above code but it appears to break the back functionality?

Now, when I click the back button it goes back to the page but its just blank… Just to build the question out a bit more to maybe make more sense for my use case…

I have multiple pages that I access using routes like this

{
path: '/sessionDays/',
url: './pages/sessionDays.html',
options: {
  animate: true,
},
},

This loads up a listing of data that is triggered by the page init for x section ( if there is a better way of doing this I am open to changing it, however this is what I was able to gather from the docs)

When naivating to a specific page we fireoff code like

$$(document).on('page:init', '.page[data-name="sessionDays"]', function (e) {
//always set the header stuff

 buildHeader();
 getSessionDays('days');
 setTimeout(function(){$$(".mytoolbar .tab-link-highlight").remove();},100);


});

This works great, however if I navigate forward from this point and then click back the back button in my app that is tied to

 app.views.main.router.back();

it will produce a ‘blank’ page (using the stackable set to true)

When its not set to true, it will navigate back correctly, however it will fire the init again (oddly enough it doesn’t always fire init, seems random? ) This is problomatic because the details of a page or list position should stay in-tackt so the scenario might be

Select a day > List items for that day (about 50 or more) > Select a day ( list details)

Now going back one from the detail day will fire off the init page again, causing the listing to reset (loosing position) and updating other aspects of the page. Now this gets worse the deeper you go because a ‘detail’ page make link to another ‘detail’ page and because the init fires each time it would be incorrect data.

Previously, non-framework7 version of my app used hash navigation to navigate and a regular history.back would go back one like a regular browser and not cause it to reload the previous page, ideally I would have similar functionality.

I’m not sure if there is a hybrid to keepAlive or stacked pages where it keeps them in cache for history but can be triggered to update the cached going forward so it adds a new page to the history ?

6

Same issue,
Please suggest any solution