モバイル版チェックイン予定表(3) – リストビューのクリックで次画面を表示

前記事に引き続いて、モバイル版のチェックイン予定表を作成する。このアプリは、基本的に「一覧－明細」形式になっていて、一覧表をクリックした際、クリックした行(項目)に応じて、次画面(明細画面)の内容を変更する必要がある。以下では、タグ一覧表ページ(#pgPlanList)の一覧表(#lvTagPlan)を例としてコードを説明する。

• リストビューの作成

前記事にあるように、リストビューはリンクリストとして作成しているので、クリックすることで(自動的に)次画面(#pgPlan)に遷移する。

<li><a href="#pgPlan">2013/04/03 - 買い物</a></li> <!-- アイテム例 -->

• リストビューに対するイベントハンドラを定義する

// JavaScript
$(document).on('pageinit', '#pgPlanList', function(e){
  $(this).on('click', '#lvTagPlan li', function(){ // クリックイベントを捕捉する
    var idx = $('#lvTagPlan li').index(this); // 何行目がクリックされたかを取得
    loadPlanM(gTagPlan[idx].tag_key); // 明細データ(次画面用)をロード
  });
});

ページを初期化するタイミングでイベントハンドラを定義する。グローバル変数(オブジェクトの配列) gTagPlan[] にデータストアからロードした内容(このサブセットがリストビューに表示している内容)が格納されている。

• 次画面を生成する

// JavaScript
function loadPlanM(tag_key){
  var sort = 'spot_time:ASCENDING';
  var query = 'spot_tag:' + tag_key;
  gDSspotPlan.dbRevAll2(sort, query, function(plans){
    gPlan = plans;
    if (plans == null) { // 予定データがない場合
      // console.debug('loadPlanM:empty');
    } else { // 予定データがある場合
      showPlanListM(plans); // 予定表テーブルを表示
      // console.debug('loadPlanM:' + plans.length);
    }
  });
}

基本的には先の画面と同じ。クリックされたタグに合致した予定データを読み込み、データがあったら一覧を表示する。

• 実行例

・タグ一覧画面 – 「両国」をクリック

・予定一覧画面

・同じデータをPCブラウザで見た場合