jQueryMobileマネージャ利用時のコントローラライフサイクル
コントローラのライフサイクルイベント__ready、__disposeと、
ページが表示にされてコントローラのイベントハンドラが有効になった時に発生するh5jqmpageshowイベント、
ページが非表示になりコントローラのイベントハンドラが無効になった時に発生するh5jqmpageshowイベント、
この4つの発生順をページの遷移パターンから説明します。
h5jqmpageshowイベント
このイベントはJQMのpageshowイベントのタイミングで発生します。
ただし、初めてコントローラが生成されてかつコントローラのイベントハンドラのバインドが完了するよりも前にpageshowイベントが発生した場合、
hifiveのライフサイクルイベント、h5controllerreadyイベントのタイミングでh5jqmpageshowイベントが発生します。
コントローラのイベントハンドラがバインドされるよりも前に、pageshowイベントが発生する場合は主に以下の2つの場合に起こります。
- トランジションなしでページを表示(同期的にJQMのイベントが発生)した場合
- ライフサイクルイベント__readyがPromiseオブジェクトを返してh5controllerreadyイベントの発生が遅延した場合
h5jqmpagehideイベント
このイベントはJQMのpagehideイベントのタイミングで、アクティブページに対して発生します。
ただし、JQMのpageremoveイベントが発生した場合、h5jqmpagerehideイベントはこのイベントのタイミングで発生します。
イベントが発生する場所(要素)
h5jqmpageshow、h5jqmpagehideともに、これらのイベントは h5.ui.jqm.manager.define() によって指定されたページの要素でかつ、アクティブページで発生します。
例えば、Aページのh5jqmpageshowが発生する前にBページに遷移したとき、Bページ表示中にAページのh5jqmpageshowは発生しません。
イベントの発生順序
A・B・Cの3つあるページを以下のように遷移した場合のイベントの発生順序を説明します。
JQMのバージョン: 1.2.0
前提条件
- __readyでの非同期処理によってコントローラの初期化完了が遅延しないこと
- data-dom-cacheはfalse(無効)であること(有効の場合、ページが破棄されないため__disposeは発生しません)
トランジションが有効の場合
※ data-transtionがnone以外でかつ、CSS Animationをサポートしているブラウザ
Aを初期表示した場合の、Aでのイベント発生順序
A ： __ready
A ： h5jqmpageshow
A -> B に遷移した場合の、AとBでのイベント発生順序
B ： __ready
A ： h5jqmpagehide
B ： h5jqmpageshow
A -> B 遷移後、B -> Cに遷移した場合の、BとCでのイベント発生順序
C ： __ready
B ： h5jqmpagehide
B ： __dispose
C ： h5jqmpageshow
A -> B 遷移後、B -> Aに遷移した場合の、AとBでのイベント発生順序
B ： h5jqmpagehide
B ： __dispose
A ： h5jqmpageshow
トランジションが無効の場合
Aを初期表示した場合の、Aでのイベント発生順序
A ： __ready
A ： h5jqmpageshow
A -> B に遷移した場合の、AとBでのイベント発生順序
A ： h5jqmpagehide
B ： __ready
B ： h5jqmpageshow
A -> B 遷移後、B -> Cに遷移した場合の、BとCでのイベント発生順序
B ： h5jqmpagehide
B ： __dispose
C ： __ready
C ： h5jqmpageshow
A -> B 遷移後、B -> Aに遷移した場合の、AとBでのイベント発生順序
B ： h5jqmpagehide
B ： __dispose
A ： h5jqmpageshow