Page 回调函数

Page 回调函数可以用来为特定的页面执行特定的代码。Page 回调函数会被 Page 事件有很多优点。

• Page 回调函数不是事件，所以会有更少的的内存占用和更少的内存泄露。
• 因为不是事件，所以不用担心如何监听。
• 有时候会在代码结构上比使用事件更方便。

回调方法

使用 Page 回调函数我们必须使用正确的App方法

回调对象

上面的每一个方法都会返回一个回调对象，这个对象有两个方法，你可以用来手动触发或者移除这个回调。

例子

下面是一些Page回调函数的用法例子

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();

初始化页面的回调

有时候我们需要页面初始化的回调函数，比如在首页中。但是有一个问题，当我们添加 .onPage 回调的时候，应用已经初始化完成了，我们添加的回调函数不会被触发。有如下几个方法可以解决这个问题:

1. 手动初始化

这种情况下我们需要在添加回调函数之后再手动初始化

var myApp = new Framework7({
  init: false //Disable App's automatica 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. 使用APP带参数的回调

这样不是很方便，但是我们可以通过参数来做:

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

3. 手动触发

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