Advice on page navigation

Questions
1

Hi to all.
I’m really new to Framework7 and I’m trying to build a simple application.

Currently, i’ve created a simple app page with:

<div id="app" class="framework7-root">
   <div class="statusbar"></div>

   <div class="view view-main">
       <!-- Initial Page, "data-name" contains page name -->
       <div data-name="home" class="page page-current">
           <!-- Top Navbar -->
           <div class="navbar">
               <div class="navbar-inner">
                   <div class="title">Page Home Title</div>
               </div>
           </div>

           <!-- Scrollable page content -->
           <div class="page-content ptr-content ptr-transitioning" data-ptr-distance="55">
               This is page content for "page-home"
           </div>
      </div>
   </div>
</div>

Now, when I click on a like, a new page is added after page home. Doing so will result in two pages at the same time in the dom.

this would be ok, but as I’m using some templates, I can’t simply use:

$$('script.template').html();

because i would have multiple “” in the same dom.

Currently, I use some script on pageInit event, bound to each page, something like this:

app.on('pageInit', function(page) {
    if ( page.name == '' )      onHomeInit(page);
    if ( page.name == 'order' ) onOrderInit(page);
});

the question is: are multiple pages in DOM at the same time an expected behaviour or am I miss something?
How can I refer to the current active page without prefixing everything with the selector “’.page[data-name=“order”]” or without putting unique IDs everywhere?

2

Yes, it is by design that you have two pages in DOM,
It is required for iOS swipe back page feature. It can be disabled in View parameters. As for page reference, you can access using page.$el element, e.g. page.$el.find(“.something”) and it will look only through the page which received callback

3

Thank you for the response.
What I’ve seen is that my current app doesn’t set “page-current” to the “current” active page.

Current behaviour is replacing content to add the new page as “page-next” and keeping the “old” page as “page-current”. I don’t think this is normal.

4

Another question.

page.$el.find(“something”) is working properly, but “page” isn’t available everywhere (based on the scope).

app.views.main.router.$el.find(“something”) seems to provide the same result. Is this safe ?

5

No, router.$el is the HTMLElement of View

6

So, how can I access to “page” element globally (or to active page from the router that is always available) ?

7

This is the code i’m using:

app.on('pageInit', function(page) {
    if ( page.name == '' )      onHomeInit(page);
    if ( page.name == 'order' ) onOrderInit(page);
});

onHomeInit();

as you can see, to trigger onHomeInit on first page, I call “onHomeInit()” manually, but I need “page” inside that method. When called manually, I don’t have a “page” object available. How can I get that ?

8

I would better to move pageInit event handler to app parameters:

app = new Framework7({
  on: {
    pageInit() {
      ...
    },
  }
});

or init app manually after you define callback:

var app = new Framework7({
  init: false,
});

app.on('pageInit', function (page) {
  ...
});

app.init();