jQueryMobile使用時のロジックの扱い

[hitomi kiguchi]

バグ報告・環境依存の問題と思われる場合は、以下の項目をご記入ください。

 

--------------------------------------------------------------------

【hifiveのバージョン】1.1.8

【ブラウザおよびバージョン】Chrome 34.0.1847.131 

【ブラウザの動作OS】 Windows 7 Pro

--------------------------------------------------------------------

木口です。

jQueryMobileとhifiveを連携してアプリ開発をしております。

2点質問です。

①jQuery を使用する場合と、jQueryMobileを使用する場合で、

ロジックの扱いは異なるのでしょうか？

②jQueryMobileを使用する場合でもデータモデル、データバインドは使用可能でしょうか？

①は、コントローラの場合は、jQueryMobile専用のコントローラマネージャが有るようなので

質問させていただきました。

回答をよろしくお願い致します。

[simdy]

しもだです。

ご質問に回答します。

 

1. ロジックは、jQueryMobileを併用した場合・しない場合で変わりありません。
なお、jQueryMobileのAjaxベースのページ読み込みに対応する場合、
ロジックのコードも動的に読み込まれる必要があります。
hifiveのjQM連携機能ではdata-h5-script="pageScripts.js" のようにしてスクリプトの動的ロードが可能ですので、
その中に忘れずにロジックのコードを含めてください。

 

2. データモデル・データバインドともに利用可能です。
データモデルに関しては、ビュー層とは基本的に独立しているので、jQMとは特に関係ありません。
データバインドについてですが、バインディングによる自動的なビューの更新自体は可能です。

ただし、現バージョンでは、ビュー更新時にjQM側のウィジェットのリフレッシュは自動的には呼ばれません。

リスト表示などの部分での利用が多いと思いますのでListviewを例にすると、リストに対応するデータが更新されたときに

　　$('.itemlist').listview('refresh')
を呼ぶ必要があります。

 

なお、「リストに対応するデータが更新された」タイミングの取得は、

データモデルへの更新を行うコードの直後に（明示的に）refreshを呼ぶか、

もしくは、データモデルのイベントをリッスンしておくなどの方法があります。

 

また、データバインドを使用する場合、コントローラが破棄されるタイミングで
バインディングも解除することを推奨します。

 

コード例：

 

var aPageController = {

  __name: 'my.project.aPageController',

 

  _binding: null,

 

  __ready: function(){

     //bind()メソッドを呼ぶと、Bindingオブジェクトが返されます。

     this._binding = this.view.bind(this.$find('itemlist'), data);

  },

 

  __dispose: function() {

    //jQM連携機能を使用している場合、

    //ページ遷移時に一定の条件を満たすと、ページが削除され、同時にコントローラが破棄されます。

    //このとき、コントローラの__disposeライフサイクルメソッドが実行されるので、

    //ここでデータバインドを完全に解除します。

    this._binding.unbind();

  }

}

[hitomi kiguchi]

木口です。

回答ありがとうございます。

理解しました。

>ロジックのコードも動的に読み込まれる必要があります。

なるほど、ロジックをコントローラと別ファイルにすると読み込まれない？？凡ミスしてるかな？？と思っておりました。

2014年5月12日月曜日 14時34分02秒 UTC+9 simdy: