[Onsen UI] ons-pageのイベントを活用してみよう。

Onsen UIを利用する上で、ページ構成の基盤になるのが `ons-page` になります。
この ons-page には、下記の四つのイベントが用意されています。


| 名前       | 概要 |
|:-----------------|:------------------|
| init             | ページがアタッチされた後に発火します。 |
| show             | ページが表示された後に発火します。 |
| hide             | ページが隠れた後に発火します。 |
| destroy          | ページが破棄される前に発火します。 |


これらのイベントを利用することで、対象の ons-page の初期化処理や、ページが表示される際に必要な処理を行うことができます。

これらのイベントを利用する一般的な記述方法は、下記になります。

```html
<body>
  <ons-navigator id="nav" page="page1.html">
  </ons-navigator>
  
  <template id="page1.html">
    <ons-page id="page1">
      <ons-toolbar>
        <div class="center">Page 1</div>
      </ons-toolbar>
      <ons-button
        onclick="document.getElementById('nav').pushPage('page2.html')">
        Next Page
      </ons-button>
    </ons-page>
  </template>
  
  <template id="page2.html">
    <ons-page id="page2">
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Page 1</ons-back-button>
        </div>
        <div class="center">Page 2</div>
      </ons-toolbar>
    </ons-page>
  </template>
</body>
```

```javascript
<script>
  document.addEventListener('init', function(event) {
    var page = event.target;

    if (page.id == "page1") {
      console.log("init page1");
    } else if (page.id == "page2") {
      console.log("init page2");
    }
  }, false);
  
  document.addEventListener('show', function(event) {
    var page = event.target;
    
    if (page.id == "page1") {
      console.log("show page1");
    } else if (page.id == "page2") {
      console.log("show page2");
    }
  }, false);
  
  document.addEventListener('hide', function(event) {
    var page = event.target;
    
    if (page.id == "page1") {
      console.log("hide page1");
    } else if (page.id == "page2") {
      console.log("hide page2");
    }
  }, false);
  
  document.addEventListener('destroy', function(event) {
    var page = event.target;
    
    if (page.id == "page1") {
      // ons-navigatorのトップページでは呼ばれません。
      console.log("destroy page1");
    } else if (page.id == "page2") {
      console.log("destroy page2");
    }
  }, false);

  ons.ready(function() {});
</script>
```

Onsen UI 2.4.0からは、ons-template ではなく、 `template`タグが推奨されています。
この template タグを使用した場合、ons-page 内に script タグを記述できるようになります。


#template タグを利用したイベントの記述方法 1

template タグを利用したイベントの記述方法は、下記になります。

```html
<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Page 1</ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    
    <script>
      var page2 = document.getElementById('page2');
      
      page2.onInit = function() {
        console.log("onInit page2");
      }

      page2.onShow = function() {
        console.log("onShow page2");
      }

      page2.onHide = function() {
        console.log("onHide page2");
      }

      page2.onDestroy = function() {
        console.log("onDestroy page2");
      }
    </script>
  </ons-page>
</template>
```

対象の ons-page 内に処理を記述することができるようになるため、処理の見通しも良くなります。


#template タグを利用したイベントの記述方法 2

Onsen UI v2.5.2 からは、 `ons.getScriptPage()`が追加されています。
この ons.getScriptPage() を利用すると、script タグのすぐ上にある <ons-page> 要素を取得することができます。

```html
<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Page 1</ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    
    <script>
      ons.getScriptPage().onInit = function() {

        console.log("onInit page2");

        this.onShow = function() {
          console.log("onShow page2");
        }

        this.onHide = function() {
          console.log("onHide page2");
        }

        this.onDestroy = function() {
          console.log("onDestroy page2");
        }
      }
    </script>
  </ons-page>
</template>
```

#おわりに

ons-page は、Onsen UIを利用する上で必ず使用するコンポーネントになります。
画面遷移が行われる時には、これらのイベントが実行されます。
イベントをうまく使うことで、一段上のアプリが作成できるようになるはずです。

ぜひ活用してみてください。