Improve this

ページのライフサイクル

JavaScriptの処理やアニメーションは非同期的に動作するため、Onsen UIは同期的に（狙ったタイミングで）特定の処理を実行できるようにons-pageのライフサイクルを提供しています。ページのライフサイクルを使うと、データの事前読み込み、ビューの更新、ページの破棄の前のデータ保存などができます。

イベント

<ons-page>はライフサイクルの中の決まったタイミングでいくつかのDOMイベントを発火します。各ページの振る舞い（behavior）を調整したい場合にはこれらのイベントを使用します。

• initイベントは<ons-page>がDOMにアタッチされると発火します。ページが作成されてから表示されるまでの間に、何らかの初期化処理を実行したり、ページに動的な内容を追加したりしたい場合にはこのイベントを使ってください。
• destroyイベントは<ons-page>がDOMからデアタッチされる直前に、ページが破棄される際に発火します。状態をクリーンアップしたりデータを保存したりしたい場合にはこのイベントを使ってください。
• showイベントは<ons-page>が画面に現れるたびに発火します。例えば新しいページが作成されて表示されたり、既存のページが再び表示されたりした場合に発火します。ページが表示された際に毎回行いたい処理がある場合にはこのイベントを使ってください。
• hideイベントは<ons-page>が画面から隠れた場合に発火します。例えば画面に表示中のページが破棄されたり、ページスタックには残っているが画面からページが隠れてしまったりした場合に発火します。ページが隠れるたびに毎回行いたい処理がある場合にはこのイベントを使ってください。

ページライフサイクルイベントは子孫ページに伝播し、子孫ページは連鎖的にshow、hide、destroyされます。例えば<ons-navigator>を破棄すると、画面に表示中のページ（ナビゲーターの最上位のページ）にhideイベントが発火し、ナビゲーターのページスタックの全ページにdestroyイベントが発火します。

ライフサイクルイベントは通常のDOMイベントであり、バブリング（bubbling）するので、documentや任意の親要素にリスナーを追加することでイベントを捕捉することができます。その際、イベントオブジェクトには、ページへの参照がevent.targetに格納されます。

<ons-page id="page1">空ページ</ons-page>

<script>
document.addEventListener('init', function(event) {
  if (event.target.matches('#page1')) {
    ons.notification.alert('ページ1が初期化されました');
    // コンテンツを準備...
  }
}, false);
</script>

フック

v2.4.0 からの<template>要素のサポートにより、ライフサイクルイベントに加えてライフサイクルフックが使えるようになりました。フックは対応するイベントと同じタイミングで実行されます:

<template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center"></div>
    </ons-toolbar>
    <!-- 追加コンテンツ -->

    <script>
      ons.getScriptPage().onInit = function() {
        // ページのコンテンツやその他の内容を準備
        this.querySelector('ons-toolbar .center').innerHTML = 'Title';

        this.onShow = function() { ... };
        this.onHide = function() { ... };
        this.onDestroy = function() { ... };
      };
    </script>
  </ons-page>
</template>

ここで、テンプレート（ons-page）直下のノードは1つである必要があることに注意してください。また、オプション機能として、<template>要素には<script></script>タグを入れることができます。<template>要素に<script></script>タグを入れると、テンプレートが作成されてDOMにアタッチされたタイミングでスクリプトが実行されます。

スクリプトはグローバルスコープ内で評価されるため、書く内容によってはアプリの他の部分に影響する可能性があります。例えば、スクリプト内で変数を宣言すると、グローバルスコープが汚染されます。これを防ぐには、変数宣言をクロージャでラップする必要があります。

上述のサンプルコードのように、ons.getScriptPage()メソッドを使うと、<script></script>タグの親の位置にある、DOMにアタッチされたばかりのons-pageを取得することができます。このメソッドはテンプレート内でのみ使える（ons-pageの子の中で、かつscriptタグの中で呼ぶ必要がある）ことに注意してください。また、`onsenui@2.5.2で初めて追加されたメソッドであることにも注意してください。このメソッドを使わない場合は、classやidを指定して直接ons-page`を取得する必要があります。

イベントを使うかフックを使うかは自由です。イベントはビューとロジックを分離できるメリットがあり、フックはコードが短くなるメリットがあります。

---