[SOLVED] BUG? 'app.router.back()' mixes up headers?

Questions
1

Dear all,

I am working on my first Framework7 app (before I used jquery/jquerymobile) and have the following challenge:

  • I have a app with for pages,
  • view settings are
    stackPages: true,
    removeElements: false
  • all pages have a navbar

Showing first page with ‘app.router.navigate("/page_a/")’
works fine, everything seems okay

Showing 2nd page with ‘app.router.navigate("/page_b/")’
works fine, everything seems okay

Back to 1st page with ‘app.router.back()’
works fine, everything seems okay

Showing 2nd page again with ‘app.router.navigate("/page_b/")’
navbar is not longer shown

Back to 1st page with ‘app.router.back()’
navbar of page 1 and page 2 are shown at the same time

What is my mistake? I would assume that I can use …navigate() and …back() to move between pages and backward.

Looking the DOM Elements I noticed that if a page is shown, the navbar is moved from the page element (div with class “page”) to the navbar-div that is a direct child of the “main-view”

What is my mistake?

Many thanks
Andreas

2

removeElements: true
or simply remove this param (it is true by default)

3

Frist of all, many thanks for the quick response.

Certainly, deleting the elements and always re-create them would be a soultion.
Is there no way to keep the pages?

If I am navigating forth and back, the elements have always to be re-create but actually they always showing the same content.
Does not make any sense at all it is just time consuming and might harm the user experience.

Regards
Andreas

4

“removeElements” is different thing

from docs:

During page transitions
Router may remove unused Page and Navbar elements from DOM.
Useful to be disabled in case you want to handle elements removal manually
or using other library, e.g. Vue or React

5

Yes, therefore I thought that “removeElements: false” is the right way to go, since the removal should be done manually (my own code = never since I have only approx 10 pages).

At actually the page remains in the DOM - is not removed. So, the only issue actually is that the navbar is removed and not moved back to the page :frowning:

Regards
Andreas

6

the removal must be done somehow

you only chance is using "inline-pages"
but your routes should be

{
  path:'/path/'
  pageName:'page-name' //=> data-name attribute
}
7

Thanks,

but than I do not understand the sense of “removeElements” but it makes acutally no sense at all.

And actually the navbar is not deleted, since it appears TOGETHER with the navbar of the 1st page - so, it seems like a bug.

Maybe I first I will try to write a wrapper to

  • remove the NAV bar (to ensure that is not shown with the 1st page
  • move it back to the original page / re-creates it

But many thanks for the discussion/support.

Regards
Andreas

8 
<div class="page stacked" data-name="about">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">About Framework7</div>
    </div>
  </div>
  <div class="page-content">
  </div>
</div>

{
  path:'/about/'
  pageName:'about'
}
9

Hi,

I had a closer look at the dom. Since the pages are not removed (like intended), I have the follwing states of the navbar:

<div class="navbar">
   <div class="navbar-inner sliding navbar-previous" aria-hdden="true">...</div>
   <div class="navbar-inner sliding navbar-current">...</div>
</div>

mainView.router.back()

<div class="navbar">
   <div class="navbar-inner sliding navbar-current" aria-hdden="true">...</div>
   <div class="navbar-inner sliding navbar-next">...</div>
</div>

mainView.router.navigate(…back to next page)

<div class="navbar">
   <div class="navbar-inner sliding navbar-previous">...</div>
   <div class="navbar-inner sliding navbar-previous">...</div>
</div>

Result: navbar is not longer shown on the current page!

mainView.router.back()

<div class="navbar">
   <div class="navbar-inner sliding navbar-current">...</div>
   <div class="navbar-inner sliding navbar-current">...</div>
</div>

Resulting in an overlay of two navbar that do not belong together :frowning:

Certainly the pages have different “data-name” attributes. So, the navbar is still there, not removed from the DOM, but somehow the link to the its page is lost.

Solution: After “mainView.router.back()” move the navbar back to the original page it belongs to. At least this works when this is done by manually.

Is this a BUG in framework7?

10

There is still some issue with your layout. Would be good to see full HTML structure first

11

SOLVED:

What I just noticed:

Everything is fine, if all pages are created (dynamically) and the routes are added to the app.routes object and AFTERWARDS the view is created (app.views.create)

But since in my case the pages are created dynamically based on the users interactions, I used the following approach: At the beginning just one config page (and one route); view is created
When a new page has been created (exists in the DOM), the route is pushed to

Solution:
a) pushing new routes to app.routes
b) mainView.destroy();
c) mainView = app.views.create(’.view-main’);
-> with this approach no issues anymore!

Pushing routes to mainView.routes causes some issues afterwards (e.g. multiple page transitions: pages seems to be dublicated, header is mixed up in case the old pages are not deleted).

This means, the route cause are the routes / pages added dynamically.

Best regards
Andreas