jQuery Mobile: Page 動態載入與切換

jQuery Mobile Page 是在 implement mobile app 很常用到的元件，它可以模擬 iOS navigation controller + view controller 的操作界面，不用寫太多程式碼就可以達到這樣的 UI 呈現，但真正在使用時，常常會遇到動態載入 page 或是同一個 page 要呈現不同 content 的時候，對於我這個初學者而言，也還在摸索怎麼管理這些page。

以下列出幾種動態載入 page 的方式：

Static page

提供兩種切換頁面的方式
In html file

<div data-role="page" id="page1">      
    <div data-role="header">         
        <h1>Page 1</h1>     
    </div>
    <div data-role="content">
        <a href="#page2">Change Page</a>
        <a href="#" onclick="$.mobile.changePage('#page2');">Change Page</a>
    </div>
    <div data-role="footer"> 
        <h4>Page Footer</h4>             
    </div> 
</div>    

<div data-role="page" id="page2">         
    <div data-role="header">    
       <h1>Page 2</h1>     
    </div>
    <div data-role="content">  
        <p>In page 2</p>
    </div>
    <div data-role="footer">   
        <h4>Page Footer</h4>      
    </div>
</div>

Load from html file

先放一個空的 page，再用 ChangePage() 的方式 load 下一個 page，把 page 分開在不同的檔案，code 比較清楚
In html file

<div data-role="page" id="page1">
</div>

In js file

$(function(){ 
    $.mobile.changePage("tpl/page2.html", {
        transition: "pop",
        reverse: false,
        changeHash: false
    });
});

Load html file as template

用 ajax 的方式去 load html 並當成 template，套用 data 後變成 page
index.html

<div data-role="page" id="page2">
 <div data-role="header">
  <h1><%= title %></h1>
 </div>

 <div data-role="content">
  <p><%= content %></a>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

In js file
需要搭配 underscore.js 的 template

$(function(){
    $.get('tpl/page2.html', function(data) {
        var tpl = _.template(data);
        var m = {title: "This is title", content: "In the page 2"};
        var newPage = $(tpl(m));
        newPage.appendTo($.mobile.pageContainer);
        $.mobile.changePage(newPage);
    });
});

但上述的方法有個問題，就是 page 一直用 append 的方式加到 html 裡，對記憶體是個消耗，尚在思考要怎麼管理這些 page...