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