jQueryMobileでの動的ページ追加に関するメモ

jQueryMobile
※jQuery Mobile 1.0a4.1 でのはなし。

静的なページが必ず1つ必要っぽい。(ひとつも無いとエラーが発生する)
そのため、ダミーページを作成して対応。
<!-- ダミーページ -->
<div data-role="page" id="dummypage"></div>

<!-- 
ページテンプレート 
動的ページはこれのクローンコピーを元に作成する。
data-role属性はページ作成時に付け足す。
-->
<div id="templ-page">
  <div data-role="header"><h3>ヘッダー</h3></div>
  <div data-role="content"><h3>ボディー</h3></div>
  <div data-role="footer">
    <div data-role="navbar"><ul>
      <li><a href="#" data-role="button" data-icon="arrow-l" data-direction="reverse">前ページ</a></li>
      <li><a href="#" data-role="button" data-icon="home" data-transition="pop">トップ</a></li>
      <li><a href="#" data-role="button" data-icon="arrow-r" data-transition="slide">次ページ</a></li>
    </ul></div>
  </div>
</div>
mobileinitイベントで、ページデータの非同期取得とページの作成・DOMツリーへの追加を行ったのだが、
ただ追加するだけだとダミーページがアクティブになってしまう。最初に動的生成したページのclassに
ui-page-activeを追加することで、そのページがアクティブになる。最後にui-page-activeされたページが
アクティブになるようだ。(ページ表示直後はダミーページと動的生成ページの2つがアクティブになっている
が、ページ遷移を行うと遷移先ページだけがアクティブになるので問題ないかな？)