javascriptcordovaphonegaphtml-framework-7

framework7 Page Init Event Not Firing


I am trying to use framework7 and cannot get the page init event to fire. The code I am using is very simple, and I have followed the documentation very carefully. No matter what I do, it never fires (nothing is logged to the console, and no errors).

I created a pen here showing the problem.

I also tried it with the callback myApp.onPageInit. Nada.

Any assistance greatly appreciated.

JS Code

var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});

HTML

<div class="views">
  <div class="view view-main navbar-through toolbar-through">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">Framework7</div>        
      </div>
    </div>
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="#" class="link">Left</a>
        <a href="#" class="link">Right</a>
      </div>
    </div>
    <div class="pages">
      <div class="page" data-page="home">
        <div class="page-content">
          <div class="content-block">
            <p>Hi there!</p>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • It may be solved by init app manually (sometimes event is not fired when content is in the first file loaded)

    Or try to trigger your home page callback (third point of link)