Hi
I want to reload pages as I pull the page down. My html pages are some thing like bellow:

 <template id="page1.html">
    <ons-page name='page1'>
      <ons-toolbar class="topbar">
        --------------------
      </ons-toolbar>
      
      <div class="container">
       
        
      <ons-pull-hook class="pull-hook">
          Pull to refresh
        </ons-pull-hook> -->
        <!-- <script src="../js/pull.js"></script> -->
    </ons-page>
  </template>

 <template id="page2.html">
    <ons-page name='page2'>
      <ons-toolbar class="topbar">
        ------------------------
      </ons-toolbar>
      
      <div class="container">
       
        
      <ons-pull-hook class="pull-hook">
          Pull to refresh
        </ons-pull-hook> -->
        <!-- <script src="../js/pull.js"></script> -->
    </ons-page>
  </template>

,,,,,

And the code in pull.js is as bellow

var pullHook = document.getElementsByClassName('pull-hook');
    
for (var i = 0; i < pullHook.length; i++) { 
  pullHook[i].addEventListener('changestate', function(event) {
    var message = 'Message';

    switch (event.state) {
      case 'initial':
        message = 'Pull to refresh';
        break;
      case 'preaction':
        message = 'Release';
        break;
      case 'action':
        message = 'Loading...';
         var pg=document.querySelector('#navigator').topPage.name;
         document.querySelector('#navigator').pushPage(pg);
        
        break;
    }

    pullHook.innerHTML = message;
  });

  pullHook.onAction = function(done) {
    
* 
* 
* list item
    setTimeout(done, 1000);
  };
}

Though its working ( pages refresh ) but I don’t the the messages in code on various events (such as “'Pull to refresh”, “Loading…”).
Also I have to load pull.js on every page.

My question is am I doing it right?