jQuery Mobileのリストビューで動的に次画面を生成する

時刻表アプリを作成する際には、一覧から1つの要素を選択して、その要素の詳細を表示する、というパターンを多用している。例えば、最初の画面で「路線一覧｣から1つの路線を選択し、次の画面で選択した路線の「駅」を表示する、という動作を行っている。
こういった”一覧-詳細”形式の画面を今回は以下のように作成した。(例として、上記の「路線一覧と駅」を用いて説明する。)

・路線一覧のページ：#pgTTMain
・路線一覧のリスト：#lvTTLineList
・路線一覧のデータ：lineFiles[ ]

・駅一覧のページ：#pgTTStationList

• ページ遷移はリストビューのリンクに任せる
  リストビューの要素に’a'要素を指定すると、jQuery Mobileが自動的にリンクリストにしてくれる(クリックすると指定したページに遷移する)。そこで、今の例ではページ #pgTTStationList へのリンクを含めておく。
• ‘li’要素に識別コードを含めておく
  どの行がクリックされたかがわかるように「識別コード」を含めておく。ここでは、単純に配列のインデックスとし、名前をlineIdx とした。
  以上をまとめて路線一覧のリスト：#lvTTLineList を作成する。

  // JavaScript
  var lvItem = '';
  $('#lvTTLineList').empty(); // リストビューをクリアする
  for (var i=0; i < lineFiles.length; i++ ){
    lvItem = '<li lineIdx="' + i + '">' + 
      '<a href="#pgTTStationList">' + lineFiles[i].ln_name + '</a>' +
      '</li>';		
    $('#lvTTLineList').append(lvItem);
  }
  $('#lvTTLineList').listview('refresh');
  

• どの行がクリックされたかをイベントハンドラで判定する
  クリックされたら呼ばれるイベントハンドラを定義する。’li’要素が$(this)に入っているので、$(this).attr(‘lineIdx’) で先ほど定義した識別コードを取り出す。
  (上記の例では、路線データの配列を「そのまま」表示しているので、$(‘#lvTTLineList li’).index(this) でもOK。

  // JavaScript
  $(document).on('pageinit', '#pgTTMain', function(e){
    $(this).on('click', '#lvTTLineList li', function(){
      gCurLineIdx = $(this).attr('lineIdx');
      //gCurLineIdx = $('#lvTTLineList li').index(this); // これでもOK
    });
  });
  

  イベントハンドラを定義/設定するタイミングはいろいろ考えられるが、この例ではページが初期化される時(原則1回)にしている。

• 次画面が表示されるタイミングでデータを取得する
  リストがクリックされたことで、ページ：#pgTTStationList への遷移が始まるので、このタイミングでデータを取得し、駅一覧の画面を生成する。どのデータを取得すべきかは、gCurLineIdx にセットされている。

  // JavaScript
  $(document).on('pagebeforeshow', '#pgTTStationList', function(e){	
    // データの読み込み
    loadJsonAsync('/json/tt/' + gResource.ttJsonFiles[gCurLineIdx].ln_file, 
      function(d){
        gCurLine = d;
        showStationList(gCurLine.stations); // 駅一覧を表示する
    });
  });
  

  駅一覧はページが表示されるたびに内容が変わる可能性があるので、’pagebeforeshow’ のタイミングで実行する。