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

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

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

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

<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>

<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 タグを利用したイベントの記述方法は、下記になります。

<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 タグのすぐ上にある要素を取得することができます。

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

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

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

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

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

おわりに