Page Callbacks

Page Callbacks become very handy when you need to execute specific code for specific pages. Page Callbacks have a great advantages over the Page Events:

  • Page Callbacks are not events, and this means less memory usage and less memory leaks.
  • Because they are not events, you should not worry about detaching them
  • They are more convenient in sense of code structure

Callbacks Methods

To use Page Callbacks we need to use appropriate App's methods:

myApp.onPageBeforeInit(pageName, callback(page)) - "callback" function will be executed when Framework7 just inserts new page (with "pageName" data-page attribute) to DOM

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageInit(pageName, callback(page)) - "callback" function will be executed after Framework7 initialize required page's (with "pageName" data-page attribute) components and navbar

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageReinit(pageName, callback(page)) - "callback" function will be executed for specified cached page (with "pageName" data-page attribute) that becomes visible. It is only applicaple for Inline Pages (DOM cached pages)

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageBeforeAnimation(pageName, callback(page)) - "callback" function will be executed when everything initialized and page (with "pageName" data-page attribute) is ready to be animated

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageAfterAnimation(pageName, callback(page)) - "callback" function will be executed after page (with "pageName" data-page attribute) animation

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageBeforeRemove(pageName, callback(page)) - "callback" function will be executed right before page (with "pageName" data-page attribute) will be removed from DOM

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageBack(pageName, callback(page)) - "callback" function will be executed right before page (with "pageName" data-page attribute) "back" transition. Difference with "onPageBeforeAnimation" is that this callback will be triggered for the "old" page - page that slides from center to right

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageAfterBack(pageName, callback(page)) - "callback" function will be executed right after page (with "pageName" data-page attribute) "back" transition. Difference with "onPageAfterAnimation" is that this callback will be triggered for the "old" page - page that slides from center to right

  • pageName - string - expected page's "data-page" attribute
  • callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

Callback Object

Each of above methods returns sepcial Callback Object with two methods, that you can use to trigger Page Callback manually or to remove it later:

callbackObject.trigger() - trigger callback function

callbackObject.remove() - remove callback function

Examples

Let's look at some examples of Page Callbacks usage

var myApp = new Framework7();
 
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('about', function (page) {
  console.log('About page initialized');
  console.log(page);
});
 
//The same but for Services page
myApp.onPageInit('services', function (page) {
  console.log('Services page initialized');
  console.log(page);
});
 
//We can add one more callback for About page, and previously added callback for this page will not be overwritten
myApp.onPageInit('about', function (page) {
  console.log('One more callback for About page');
  console.log(page);
});
 
//Sometimes we may need the same callback for few pages. We may separate page names with space:
myApp.onPageInit('about services', function (page) {
  console.log(page.name + ' initialized'); 
  //In console we will see 'about page initialized' for About page and 'services page initialized' for Services page
});
 
//We can also add callback for all pages:
myApp.onPageInit('*', function (page) {
  console.log(page.name + ' initialized'); 
});
 
//Let's create callback for Contacts page (with data-page="contacts" attribute) that we can control later:
var contactsCallback = myApp.onPageInit('contacts', function (page) {
  console.log('Contacts page initialized');
  console.log(page);
});
// Later we can cancel/remove this callback:
contactsCallback.remove();
// Or we can trigger it manually:
contactsCallback.trigger();          

Callbacks for Initial Pages

Sometimes we may need such Page Callbacks for initialy loaded pages (that are already in index.html file on app load), for example for home page. But there could be a problem because when we add our .onPage callbacks the App is already initialized and our callback will not be triggered. It could be solved in a few ways:

1. Init App Manually

In this case we need to init App manually after we add our callbacks for initial pages:

var myApp = new Framework7({
  init: false //Disable App's automatic initialization
});          
 
//Now we add our callback for initial page
myApp.onPageInit('home', function (page) {
  //Do something here with home page
});
 
//And now we initialize app
myApp.init();

2. Use App's Parameter Callback

This way is not very convenient but we can do it in App parameters:

var myApp = new Framework7({
  onPageInit: function (app, page) {
    if (page.name === 'home') {
      //Do something here with home page
    }
  }
});

3. Trigger Callback Manually

var myApp = new Framework7();          
 
//Now we add our callback for initial page
myApp.onPageInit('home', function (page) {
  //Do something here with home page
}).trigger(); //And trigger it right away

Note that in this case such manually triggered callback will not receive Page Data object as argument