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で余裕で読める。