列車時刻表(13) – 乗車予定一覧表

乗車予定リストをアコーディオンを使うように変更したので、アイテムに表示したボタンの処理を実現する。

• 列車時刻表ボタン
  この列車の’列車時刻表画面’に移動する。
• 乗車駅/下車駅時刻表ボタン
  この乗車の乗車駅/下車駅の時刻表画面に移動する。
• 削除ボタン
  この乗車を削除する。

• 共通の考え方
  各ボタンは乗車ごとに複数あるので、ボタンごとに同一のクラス(以下の削除ボタンでは “clsBtnRideListDelete”)を指定し、このクラスに対するイベントハンドラを定義する。また、乗車を識別するキーとして、ride_key をdata属性として乗車ごとに指定し、イベントハンドラ内で取り出せるようにする。

  <!-- HTML -->
  <button data-role="button" 
    class="clsBtnRideListDelete"
    data-ridekey="' + rides[i].ride_key + '"
    data-icon="delete">削除
  </button>'
  

  // JavaScript
  // 削除ボタンをクリックした場合の処理
  $($this).on('click', '.clsBtnRideListDelete', function(){
    // クリックした乗車データのキーを取り出す 
    var _ride_key = $(this).data('ridekey');
    // 乗車データを取得
    var _ride = getObjectByKV(gCurRides, 'ride_key', _ride_key);
    // 処理実行
  
  }
  

• 時刻表ボタン
  時刻表への3つのリンクボタンには同じクラスを指定し、同一のイベントハンドラで処理する。(異なるdata属性を指定し、この値で処理内容を分岐する。)　また、時刻表を表示するためには、データのロードが必要なので、選択された乗車から路線を取り出し、路線データをロードする。

  // javascript
  colItem += '<div data-role="collapsible" class="clsColRideList">'
   + '<h3>' + _section + '<span class="ui-li-aside">' + _lnname + '</span></h3>'
   + '<p>' + _trinfo
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_train" data-icon="arrow-r">列車時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_st_on" data-icon="arrow-r">乗車駅時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_st_off" data-icon="arrow-r">下車駅時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListDelete" data-ridekey="' + rides[i].ride_key + '" data-icon="delete">削除</button>'
   + '</p></div>';
  

  イベントハンドラ

  // JavaScript
  $($this).on('click', '.clsBtnRideListEdit', function(){
  
    var _ride_key = $(this).data('ridekey');
    var _act_mode = $(this).data('actmode'); 
    var _ride = getObjectByKV(gCurRides, 'ride_key', _ride_key); 
  		
    gCurLine = getObjectByKV(gLines, 'ln_key', _ride.ln_key); console.debug(gCurLine);
  
    loadRail(gCurLine, function(){
      switch (_act_mode){
        case 'mode_train':
          gCurTrainIdx = _ride.tr_idx;
          $.mobile.changePage($('#pgTTTrain'));
          break;
        case 'mode_st_on':
          // ...
        case 'mode_st_off':
          // ...
      }
    }
  }