読者です 読者をやめる 読者になる 読者になる

pagebeforechange イベントの処理をどう書くべきか

jQuery mobile のページ遷移のイベントのうち、

  pagebeforechange は、2回実行されることになっている。

document にしか bind できないため全てのページ遷移イベントを捕捉することになるので、
このイベントで処理を書こうと思ったら、遷移前のページ、遷移後のページを判定しなければならない。
この判定を最も手軽に処理するには、イベントの関数に渡る data オブジェクトの toPage が、2回のイベントのうち、1回は文字列になっているのを利用して以下のようにする。


$(document).on('pagebeforechange', function(e, d){
   if (typeof d.toPage === 'string') {
      var prevPageId = $(d.prevPage[0]).attr("id");
      var toPageId = d.toPage.split('#')[1];

      /* data-role="page" id="index" → id="result" の遷移を
       * 判定して、条件チェック後、false を戻り値にすると遷移しない。
       */

      if ( prevPageId == 'index' && toPageId == 'result' ){
         if ( $('#customerCode').val() == "" ){
            $('#feedback').html("customer code : require !!");
            return false;
         }
      }

   }
});


でもこの形だと他のページ遷移のチェックの if 文をこの pagebeforechange イベントの bind 文の関数の中に
沢山書かなくてはならず、他人が書いた 長い JavaScript ソースを嫌という程、
仕事のために読ませられてきた者には、コード量が膨れ上がっていく構造が嫌なのである。

以下のようにページ毎のチェック関数を書いて、

var validateIndexLogin = function(d){
   if ($(d.prevPage[0]).attr("id") == 'index' && d.toPage.split('#')[1] == 'login' ){
      if ( $('#customerName').val() == "" ){
         return false;
      }
   }
   return true;
};

これを pagebeforechange イベントを処理する関数内で以下のように call を。。。


$(document).on('pagebeforechange', function(e, d){
   if (typeof d.toPage === 'string') {

      if (!validateIndexLogin(d)) return false;
      // 同様にページ遷移におけるバリデーションチェックを存在するページ遷移だけ記述
      if (!validatePage1to2(d)) return false;
      if (!validatePage2to3(d)) return false;
      if (!validatePage3to4(d)) return false;
   }
});


もっと簡潔にする方法はないのだろうか?とページ遷移におけるバリデーション以外の処理も、
一緒に書くことを考えると、悩むところである。