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