F7 V2 back button behavior


#1

Hi,

I’ve got navbar in my app, which I should show or hide on different pages.
I add this code to routing. For example:
var routes = [
{
path: ‘/first/’,
url: ‘./index.html’,
name: ‘first’,
on: {
pageInit: function () {
$(’#navbar’).hide();
}
}
},
];
So on different pages I hide or show navbar. It works great, but I’ve got back button on this navbar:
a class=“link icon-only back”>


Here starts the problem.
When I click back button, I see previous page, but pageInit callback doesn’t reach. So nothing happens with navbar.

I tried to add some code in
$$(document).on(‘page:init’, function (e,page) {
console.log(page.detail.route.name);
console.log(app.views.main.router.url);
});
F7 enters this function and I see right url.
But there is problem with name. Or route.name is undefined, or it has name of the first main page.

PushState is set to true in views. But I can delete it and the behavior will be the same.

So is it right back button’s behavior and is it correct way to hide/show navbar on different pages?

Thnx


Navbar back button error in F7 Vue
#2

I’ve updated F7 to last version 2.0.7 and it seems that the error ‘route.name is undefined’ has gone.
But another issue is still there.

If I’ve got more then two pages in pushState and click back button, than app.views.main.router.url shows the previous page url, and page.detail.route.name shows name od the first page.


#3

It must be just page.route.name without detail


#4

No, page.route is undefined.
if I make console.log(page) I can see route.name in detail.

I made a test:
http://dailybmw.ru/just_f7_back_btn_test/

There is 4 pages and if you will open console log and click to fourth page you will see this log:
pageInit:second
second
/second/
pageInit:third
third
/third/
pageInit:fourth
fourth
/fourth/

And when I click back button I expect this log:
pageInit:third
third
/third/
pageInit:second
second
/second/
pageInit::first
first
/first/

But get this:
pageInit:second
second
/third/
typeError: page.detail is undefined


#5

No, it is wrong. The issue here is that pageInit doesn’t reflect current url state. Because F7 keeps 2 pages in DOM at a time, and when you go back it preloads the page previous to back. Inspect the elements with dev tools to see. You probably need to use routeChange event instead


#6

oh, I see.

Thank you very much!