Improve this

ページのライフサイクル

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

イベント

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

ページライフサイクルイベントは子孫ページに伝播し、子孫ページは連鎖的にshowhidedestroyされます。例えば<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`を取得する必要があります。

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