title: Load data from database: Template7 and Framework7
body: <p>I am using Template7 and Framework7 to build an iOS app using PhoneGap. I am going through the <a href="http://www.idangero.us/framework7/docs/template7-pages.html#.VngWBuN97fY" rel="nofollow">tutorial</a></p>
  
  <p>my-app.js file</p>
  
  <pre><code>// Initialize your app
  var myApp = new Framework7({
      init: false
  });
  
  // Export selectors engine
  var $$ = Dom7;
  
  // Add view
  var mainView = myApp.addView('.view-main', {
      // Because we use fixed-through navbar we can enable dynamic navbar
      dynamicNavbar: true
  });
  
  myApp.onPageInit('index', function (page) {
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {}
  });
  
  myApp.init();
  
  // Callbacks to run specific code for specific pages, for example for About page:
  myApp.onPageInit('about', function (page) {
      console.log('Baga');
      // run createContentPage func after link was clicked
      $$('.create-page').on('click', function () {
          createContentPage();
      });
  });
  
  // Generate dynamic page
  var dynamicPageIndex = 0;
  function createContentPage() {
      mainView.router.loadContent(
  
          '&lt;!-- Top Navbar--&gt;' +
          '&lt;div class="navbar"&gt;' +
          '  &lt;div class="navbar-inner"&gt;' +
          '    &lt;div class="left"&gt;&lt;a href="#" class="back link"&gt;&lt;i class="icon icon-back"&gt;&lt;/i&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;' +
          '    &lt;div class="center sliding"&gt;Dynamic Page ' + (++dynamicPageIndex) + '&lt;/div&gt;' +
          '  &lt;/div&gt;' +
          '&lt;/div&gt;' +
          '&lt;div class="pages"&gt;' +
          '  &lt;!-- Page, data-page contains page name--&gt;' +
          '  &lt;div data-page="dynamic-pages" class="page"&gt;' +
          '    &lt;!-- Scrollable page content--&gt;' +
          '    &lt;div class="page-content"&gt;' +
          '      &lt;div class="content-block"&gt;' +
          '        &lt;div class="content-block-inner"&gt;' +
          '          &lt;p&gt;Here is a dynamic page created on ' + new Date() + ' !&lt;/p&gt;' +
          '          &lt;p&gt;Go &lt;a href="#" class="back"&gt;back&lt;/a&gt; or go to &lt;a href="services.html"&gt;Services&lt;/a&gt;.&lt;/p&gt;' +
          '        &lt;/div&gt;' +
          '      &lt;/div&gt;' +
          '    &lt;/div&gt;' +
          '  &lt;/div&gt;' +
          '&lt;/div&gt;'
      );
      return;
  }
  </code></pre>
  
  <p>How do I use template7data in </p>
  
  <pre><code>myApp.onPageInit('index', function (page) {
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {}
  });
  </code></pre>
  
  <p>and load data in it from database or from some AJAX query. I want to use that data to display content on index.html file.</p>