jQuery Mobileを使う動的ページにJavaScriptのオブジェクトを渡す
いままでjQuery Mobileでページ作ってて、pagecreate/pageshowでページを構築する場合、なんかテキトーな変数名でグローバルに置いてた。
<div id="hoge-page" data-role="page"> <script> var hoge = <?php echo json_encode($hoge) ?> jQuery('#hoge-page').live('pagecreate', function() { console.log(hoge); }); </script> </div>
グローバル変数使うのやだなー、と思いつつ、他に思いつかなかったのでこうしてた。
んで、ふと解決策思いついた。
#hoge-page自体にdata属性としてもたせてやればいいんじゃないかと。
<div id="hoge-page" data-role="page"> jQuery('#hoge-page').data('params', <?php echo json_encode($hoge) ?>); jQuery('#hoge-page').live('pagecreate', function() { var page = jQuery(this); var hoge = page.data('params'); console.log(hoge); });
ページ内遷移するときも、
<div id="hoge-page" data-role="page"> <a href="#fuga-page">fuga</a> </div> <div id="fuga-page" data-role="page"> </div> <script> jQuery('a[href="#fuga-page"]').click(function() { var params = { name: "jhoshina", age: 17 }; jQuery('#fuga-page').data('params', params); }); jQuery('#fuga-page').live('pagecreate', function() { var params = jQuery(this).data('params'); console.log(params.name); }); </script>
みたいに遷移前にパラメータつっこんでおけば、pagecreate/pageshowで余裕で読める。