h5.ui.jqm.manager JQMのpageshow/pagehide相当のイベントをhifiveでディスパッチする

[mtakeuchi]

Aページ表示後、Bページに遷移するパターンでトランジションありで遷移した場合、Bにdefineしたコントローラでpageshow/pagehideを拾うことができるが、トランジション無しで遷移すると、Bにdefineしたコントローラでpageshowやpagehideを拾うことができない。 ページの生成・破棄のタイミングはhifiveのライフサイクルイベントで知ることができるが、ページの表示・非表示のタイミングは知ることができないため、コントローラが有効または無効になったときにJQMマネージャでpageshow/pagehide相当のイベントを起こすようにする。

hifiveのイベントとJQMのイベントの発生タイミング

JQM ver.1.2.0 id:要素 type:イベント名

• A -> B トランジションあり id:BODY type:pagebeforechange id:BODY type:pagebeforeload id:B type:pagebeforecreate id:B type:pagecreate id:B type:pageinit id:BODY type:pageload id:BODY type:pagebeforechange id:A type:pagebeforehide id:B type:pagebeforeshow id:B type:h5controllerbound B __ready id:B type:h5controllerready id:A type:pagehide id:B type:pageshow id:BODY type:pagechange
• A -> B トランジションなし id:BODY type:pagebeforechange id:BODY type:pagebeforeload id:B type:pagebeforecreate id:B type:pagecreate id:B type:pageinit id:BODY type:pageload id:BODY type:pagebeforechange id:A type:pagebeforehide id:B type:pagebeforeshow id:A type:pagehide id:B type:pageshow id:BODY type:pagechange id:B type:h5controllerbound B __ready id:B type:h5controllerready

[mtakeuchi]

A -> B遷移後、 B -> A に戻った場合

• A -> B 表示後、B -> A にトランジションありで戻る id:BODY type:pagebeforechange id:B type:pagebeforehide id:A type:pagebeforeshow id:B type:pagehide id:B type:pageremove id:B type:h5controllerunbound id:A type:pageshow id:BODY type:pagechange
• B -> A にトランジションなしで戻る id:BODY type:pagebeforechange id:B type:pagebeforehide id:A type:pagebeforeshow id:B type:pagehide id:B type:pageremove id:B type:h5controllerunbound id:A type:pageshow id:BODY type:pagechange

戻った場合はトランジションの有無で違いなし。

[mtakeuchi]

A -> B -> C

id:BODY type:pagebeforechange id:BODY type:pagebeforeload id:C type:pagebeforecreate id:C type:pagecreate id:C type:pageinit id:BODY type:pageload id:BODY type:pagebeforechange id:B type:pagebeforehide id:C type:pagebeforeshow id:C type:h5controllerbound id:C __ready id:C type:h5controllerready id:B type:pagehide id:B type:pageremove id:B type:h5controllerunbound id:C type:pageshow id:BODY type:pagechange

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (仮

• 『Aを初期表示』 A - __ready A - h5jqmpageshow
• 『A -> B』 に遷移 A - h5jqmpagehide B - __ready B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移] B - h5jqmpagehide C - ready B - dispose C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移 B - h5jqmpagehide B - __dispose A - h5jqmpageshow

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (トランジションにアニメーションが適用されている場合

h5jqmpageshow = JQMのpageshowとほぼ同じタイミングで発生 h5jqmpagehide = JQMのpagehideとほぼ同じタイミングで発生

• 『Aを初期表示』 A - __ready A - h5jqmpageshow
• 『A -> B』 に遷移 B - __ready A - h5jqmpagehide B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移] C - ready B - h5jqmpagehide B - dispose C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移 B - h5jqmpagehide B - __dispose A - h5jqmpageshow

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (トランジションにアニメーションが適用されていない場合

h5jqmpageshow = JQMのpageshowとほぼ同じタイミングで発生 (初期表示時は、JQMコントローラがreadyになるよりも前にpageshowが発火してしまうため、h5controllerready後に発生する) h5jqmpagehide = JQMのpagehideとほぼ同じタイミングで発生

• 『Aを初期表示』 A - __ready A - h5jqmpageshow
• 『A -> B』 に遷移 A - h5jqmpagehide B - __ready B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移 B - h5jqmpagehide B - dispose C - ready C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移 B - h5jqmpagehide B - __dispose A - h5jqmpageshow

[mtakeuchi]

pageshowがJQMコントローラのバインドよりも早く実行されたときの挙動

1. h5jqmpageshowイベントは、readyの完了(h5controllerreadyが発火)を待ってから1回だけ実行する。 (AのコントローラのreadyでPromiseが返され、__readyの処理が完了しないうちにA->B->Aと遷移した場合でも、Aのh5jqmpageshowは1回だけ実行される)
2. 1.以降は、JQMのpageshowと同じタイミングでh5jqmpageshowを実行する。

なお、アクティブページでのみh5jqmpageshow/hideは実行される。