jQueryMobile連携（jqm.managerの動作）

• 概要
• API
  • h5.ui.jqm.manager
    • define()
    • init()
• 実装例
  • 1ページに1コントローラを登録する
  • 1ページに複数のコントローラを登録する
• 動的コントローラ対する処理
• ライフサイクルイベント時に行う処理

hifiveは、jQueryMobileのページ遷移タイミングに同期して
コントローラインスタンスの生成・破棄を自動的に行う連携機能を提供しています。

このページでは、jqm.managerの仕様を説明します。

概要

jQuery Mobile専用コントローラマネージャ(以下、JQMマネージャと省略)は、現在表示されているページ(data-role属性にpageが設定された要素)に指定したコントローラとCSSファイルを読み込むという定義を行うことにより、 jQueryMobile特有のページのライフサイクル(DOM生成や破棄)にあわせ、ページに対して

• コントローラで定義したハンドラ
• スタイル(CSSファイル)

の有効・無効化を行います。

h5.ui.jqm.manager.init()でJQMマネージャの実行を開始し、h5.ui.jqm.manager.define()でどのページでどのコントローラを使用するかを登録します。

API

h5.ui.jqm.manager

define()

• pageId
  • ページID
    • ページ(data-role="page")要素のID属性の値を文字列で指定します。

• cssFilePath
  • CSSファイルのパス
    • このページで読み込むCSSファイルのパスを指定して下さい。1つの場合は文字列で指定し、複数の場合はパスを保持する配列を指定して下さい。

• controllerDefObj
  • コントローラ定義オブジェクト
    • このページで実行するコントローラの定義オブジェクトを指定して下さい。

• parameterObj
  • パラメータ
    • コントローラのライフサイクルイベントに渡したい値を定義したオブジェクトを指定してください。

init()

JQMマネージャの実行を開始します。
init()を実行せずにdefine()を実行した場合も暗黙的にinit()が実行されますが、define()を実行するタイミングよりも前に、ページに記述された『data-h5-script』属性に指定されているJSファイルの読込みを行いたい場合は、このメソッドを直前で実行する必要があります。

実装例

1ページに1コントローラを登録する

• ページA(id=pageA)にControllerAと、このページで使用するCSSファイルのパスを登録する。

CSSファイルは表示するページのHTMLファイルからの相対パスで指定して下さい。

1ページに複数のコントローラを登録する

1つのページに複数コントローラを登録することもできます。
以下のように、登録したいコントローラ定義オブジェクトの数分、define()を実行して下さい。

• 使用するCSSファイルのパスとControllerBにのみパラメータを指定し、ページA(id=pageA)にControllerAとControllerB2つのコントローラを登録する。

ただし、1つのページに同一のコントローラを2つ以上バインドすることはできません。
コントローラ定義オブジェクトの__nameプロパティの値がバインド済みのコントローラと同値であるか比較し、同値の場合はバインドされません。

動的コントローラ対する処理

JQMマネージャはdefine()で登録されたコントローラの他に、ページ内の要素にh5.core.controller()でバインドされたコントローラ(以下、動的コントローラと省略)も管理し、ハンドラの有効・無効化を制御します。動的コントローラは生成時に「h5controllerbound」イベントを発行します。JQMマネージャはバブリングしたh5controllerboundイベントを拾って動的コントローラを管理対象に追加します。

ライフサイクルイベント時に行う処理

JQMマネージャは、jQueryMobileが発行する以下のイベントを監視しています。

• pageinit
• pageremove
• pagebeforeshow
• pagehide

これらのイベントに対して、JQMマネージャは以下の処理を実行します。

• pageinit
  • このイベントが発生したページ(新規に生成されたページ)に記述されている、『data-h5-script』属性に指定されたJSファイルの読込みを行います。
  • このイベントが発生したページ(新規に生成されたページ)で使用するCSSファイルを、define()時に登録した情報に基づき、HEADタグに追加します。
  • このイベントが発生したページ(新規に生成されたページ)で使用するコントローラのイベントハンドラを、有効化(ハンドラが動作する状態)にします。

• pageremove
  • このイベントが発生したページ(DOMツリー上から除去されるページ)で使用していたコントローラを破棄(dispose)し、同時にJQMマネージャが保持しているコントローラのインスタンスも削除します。
       define()で登録されたコントローラの他に動的コントローラも対象となります。

• pagebeforeshow
  • 遷移先のページで使用するCSSファイルを、define()時に登録した情報に基づき、HEADタグに追加します。
  • 遷移先のページで使用するコントローラのイベントハンドラを有効化(ハンドラが動作する状態)し、遷移元で使用しているコントローラのイベントハンドラを無効化(ハンドラが動作しない状態)にします。
       define()で登録されたコントローラの他に動的コントローラも対象となります。

• pagehide
  • 遷移元のページで使用しているCSSファイルを、define()時に登録した情報に基づき、HEADタグから除去します。