jQuery Mobileのイベントを検証してみる

Pocket
[`evernote` not found]

最近めっきりjquery mobileを追っかけていなかったのですが、jquery mobile1.1になってとても使えそうなイベントが追加されましたのでご紹介します。

不確かな情報で申し訳ないですが、確か以前まであったイベントですと

$(document).bind('イベント名',function(){
     //イベント発生時の処理
});

という書き方をしなければならなかったと思います。
これだと、特定のページを表示させた時に処理を行おうとする時、少し書き方がめんどくさいというか、書けたのかな?ごめんなさい。試したことないです。。。

で、今回追加された新しいイベントpageinit()がそんな悩みを解決してくれます。
このpageinit()はどうやって使うかというと

$('#hoge').live('pageinit',function(){
   //ページID:hogeが表示された時に処理を行う
})

こんな感じで書けますので、特定のページを表示した際に処理することが簡単になりました。
これは大きな進歩だと思います。
jquery mobileを使う際に一番懸念されることが、ページ遷移を繰り返すと構造がカオスになってしまう事だと思うのですが、今回のpageinit()をうまく使えば、割りと効率的にイベントを管理できるようになるんじゃないかと思います。

そんな訳で、どれだけイベントの管理が簡単になるかデモを作ってみました。
ちょっと複雑なものになってしまいましたが、簡単に説明すると

トップページ
 ├地図ページ//google mapを表示
 └リストページ//jsonを動的に読み込んでリストを生成

こんな感じの構成になっています。

DEMO

ちょっとgooglemapがうまく表示されなかったりしますがorz 
それなりに動いています。

コードの解説は次回詳しく書きたいと思いますが、pageinit()の部分だけ掲載すると

//#mapの時にgoogle mapを表示させる
$('#map').live('pageinit',function(){
   var latlng = new google.maps.LatLng(36.238874,137.968613);
   var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById('map_canvas'), options);
   var pageHeight = $(document).height();
   $('#map_canvas').css('height',pageHeight);
});

var list = [
   { "title": "yahoo!","url": "http://yahoo.co.jp",},
   { "title": "google","url": "http://google.co.jp",},
   { "title": "jquery","url": "http://jquery.com/",	},
   { "title": "jquery mobile","url": "http://jquerymobile.com/",},	
];
//#listの時にjsonからリストを表示させる
$('#list').live('pageinit',function(){
   var jsonAray = list;
   var spotList = $( '#spotListTmpl').tmpl( jsonAray );
   $('#spotList').append( spotList );
   $('#spotList').listview('refresh');
});

こんな感じで、ページごとにイベントを分けて管理できるようになっています。
java scriptとhtmlを比較的分離できるようになりましたので、直感的でわかりやすですよね。
jsonの展開の関係でHTML内にもjsのコードが入ってしまいましたが・・・

<!-- #index インデックスページ -->
<div data-role="page" id="index">
   <div data-role="header">
      <h1>indexページ</h1>
   </div>
   <div data-role="content">
      <p>インデックスページです。</p>
      <ul data-role="listview" data-inset="true">
         <li><a href="#map">地図ページへ</a></li>     
         <li><a href="#list">リストページへ</a></li>  
      </ul>
   </div>
   <div data-role="footer">
      <h4>footer</h4>
   </div>
</div>
<!-- #index インデックスページ ここまで -->
  
<!-- #map 地図ページ -->
<div data-role="page" id="map">
   <div data-role="header">
      <h1>地図ページ</h1>
   </div>
   <div data-role="content">
      <div id="map_canvas" style="width: 100%;"></div>
   </div>
   <div data-role="footer">
      <h4>footer</h4>
   </div>
</div>
<!-- #map 地図ページ ここまで -->
  
<!-- #list リストページ -->
<div data-role="page" id="list">
   <div data-role="header">
      <h1>リストページ</h1>
   </div>
   <div data-role="content">
      <ul data-role="listview" data-inset="true" id="spotList">
      
      </ul>
      <script id="spotListTmpl" type="text/x-jquery-tmpl">
      <li><a href="${url}">${title}</a></li>
      </script>
   </div>
   <div data-role="footer">
      <h4>footer</h4>
   </div>
</div> 
<!-- #list リストページ ここまで --> 

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。