pageInit

pageInit

pageInit and Binding Page Logic

pageInit runs once per page element, after its navbar and components are initialized, while it is still off screen. Use it for widgets outside the template and subscriptions outside the page. The book page records its title, builds the Actions sheet its navbar button opens, and listens for the network (onNetwork sets online and calls $update(), which shows an "Offline" chip):

The pageInit handler in src/pages/book.f7

    $on('pageInit', (e, page) => {
      localStorage.setItem('booknest-recent', book.title);
      sheet = $f7.actions.create({
        buttons: [{ text: 'Add to cart', bold: true }, { text: 'Cancel', color: 'red' }],
      });
      window.addEventListener('online', onNetwork);
      window.addEventListener('offline', onNetwork);
      console.log(`book ${book.id} bound its handlers on ${page.route.url}`);
    });

Pages that are not components can use a route's own on: { pageInit(e, page) { ... } }, or app.on('pageInit', (page) => ...), which hears every page in every view and filters on page.name.

MENU