[SOLVED] V2 Equivalent for myApp.onPageInit('index', function (page) {})?

Questions
1

Hello,

I’m trying out V2 and the Tabbed Views layout (which I believe is a multiple-view): https://framework7io.github.io/framework7-template-tabs/ and I would like to know how I can execute JS when the user goes to a different page? In the old version I used this:

//the alert will be displayed only when and every time the user goes to the index page
myApp.onPageInit('index', function (page) {
alert ('Accessed the index page.');
});

//the alert will be displayed only when and every time the user goes to the about page
myApp.onPageInit('about', function (page) {
alert ('Accessed the about page.');
});

I can’t find it anywhere on the docs so I guess it deprecated? I’m guessing below is its replacement?

$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

I tried it but it runs all JavaScript at once when the app get loaded. What I wanted to do was to run that page’s JS only when it’s viewed by the user. Is that still possible? How?

Thanks in advance! :slight_smile:

2

This is correct way, and it will run only on page about init:

$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

Another way is

app.on('pageInit', function (page) {
  if (page.name === 'about') { ... }
});
3

Hello again,

My app has 4 tabs as subnav and I noticed that my localForage code inside

$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
localforage.setItem('name', 'timidyo').then(function () {
    return localforage.getItem('name');
  }).then(function (value) {
    // we got our value
    alert("---"+value)
  }).catch(function (err) {
    // we got an error
    alert("error"+err);
  });

});

executes 4 times, probably because of the number of tabs. Is there a way that it will execute only once, and only when the app starts or at least when the index page is loaded? I tried adding it here

$$(document).on('page:init', '.page[data-name="home"]', function (e) {});

but to no avail. If I put it outside the init code, I get an error message that says “localforage is not defined”. Help please?

Thanks, :slight_smile:

4

localforage => localStorage

5

Hi @plpl Sorry I wasn’t clear. I’m using Mozilla’s localForage, which works like localStorage but more persistent.

6

you have this:

<script src="localforage.js"></script>

in your html?

“localforage is not defined” means:
localforage not exist in the obj-tree

7

Yes I have it in my code. :slight_smile: It’s only when I put it outside the page initialization code that I get the error. But when I do, it executes multiple times.

8 
<script src="localforage.js"></script>
<script src="app.js"></script>

“multiple times” because page:init gets fired forEach page in your 4 tabs

9

That’s what I thought. Thanks. :slight_smile: So now I have decided to have the code executed only on the index page, which is named home:

$$(document).on('page:init', '.page[data-name="home"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
alert('home page.');
localforage.setItem('name', 'hey').then(function () {
  return localforage.getItem('name');
}).then(function (value) {
  // we got our value
  alert("---"+value)
}).catch(function (err) {
  // we got an error
  alert("error"+err);
});
});

it doesn’t work. :confused: But when I add to other pages, it does. I don’t quite get it why. Here’s my code for it on index.html:

<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        <!-- Page, data-name contains page name which can be used in page callbacks -->
        <div class="page" data-name="home">
          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left">
                <a href="#" class="link icon-only panel-open" data-panel="left">
                  <i class="icon f7-icons ios-only">menu</i>
                  <i class="icon material-icons md-only">menu</i>
                </a>
              </div>
              <div class="title sliding">RateMyFace</div>
              <div class="right">
                <a href="#" class="link icon-only panel-open" data-panel="right">
                  <i class="icon f7-icons ios-only">menu</i>
                  <i class="icon material-icons md-only">menu</i>
                </a>
              </div>
            </div>
          </div>

          <!-- Scrollable page content-->
          <div class="page-content" id="geoloc">
            <div class="block no-hairlines">
              <!-- block content -->
test
            </div>
          </div>
        </div>
      </div>

Any idea what’s wrong with it?

EDIT: I ran this code

// In page events:
$$(document).on(‘page:init’, function (e, page) {
console.log(page);
})

and I noticed that the index age isn’t on the log.

Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "explore", … }
app.js:88:3
Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "messages", … }
app.js:88:3
Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "settings", … }
app.js:88:3
10

It probably happens (page:init doesn’t work for home) page because you add this event listener AFTER page was initialized. Add this call

1 Like
11

One of the options:

var app = new Framework7({
  on: {
    pageInit(page) {
      if (page.name === 'home') {
        // do something for home page
      }
    }
  }
});

Another option:

var app = new Framework7({
  init: false,
})
app.on('pageInit', (page) => {
  if (page.name === 'home') {
    // do something for home page
  }
});
app.init();
1 Like
12

Hmmm…

Unfortunately neither one of them worked for me, but this one did. It’s based from what I read in the docs:

on: {
init: function () {
console.log(‘App initialized’);
},
pageInit: function (page) {
console.log(‘Page initialized’);
console.log(page.name);
if(page.name==‘home’){
//do something
}
},
}

Do you see anything wrong that might happen if I continue to use this?

Thanks. :slight_smile:

13

Nothing wrong with it

14

Hi. I’m trying to add some functionality specific to the index.html that handles some data requests and a splash screen animation before redirecting to another page, I figured this is should be the best way to do it but it doesn’t work :

// In the new Framework7 call
on: {
  pageInit: function(page) {
    if (page.name === 'home') {
      console.log( 'HOME!' );
    }
  }
}

I’ve tried adding name: 'home' under the index entry in my routes.js but still nothing. Any idea what I’m doing wrong?

15

The problem is that the name I’m setting in routes.js is not coming through. Why would this be happening? This is what I have :

var routes = [
  {
    path: '/',
    url: './index.html',
    name: 'home',
  },
  {
    path: '/my-location/',
    componentUrl: './pages/my-location.html',
    name: 'my-location',
  }
}
16

Ok. I’ve worked out that page.name isn’t getting set… but page.route.name is getting set so I’m using that for now. Is this a bug Vladimir? Did you intend for it to be attached to the page object or is what I have the expected behaviour?

17

Page.name is the data-name attribute on page html element

18

Does the framework also still support pageAfterAnimation trigger?

I can’t get it to work using this code :

      app.on('pageAfterAnimation', (page) => {
        console.log("You re here.");
      });
19

It is pageAfterIn now