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...

初次玩 Backbone.js: 多種 Template 的實作方式

假設我想設計一個公司資料，model 為單一員工資料，包含 id 與 name。collection 為部門資料，由多個員工所組成。而 view 用來顯示部門資料之用。

// Models
company.models.Employee = Backbone.Model.extend({
    defaults: {
        id: undefined,
        name: undefined
    }
});

// Collections
company.collections.Department = Backbone.Collection.extend({
    model: company.models.Employee
});

// Views
company.views.EmployeeList = Backbone.View.extend({
    el: "#container",
 
    render: function() {
        ...
    }
});

// Create base data
var c = new company.collections.Department(
        [{id:1, name: "Star Willard"},
         {id:2, name: "Rhona Eggleston"},
         {id:3, name: "Cassi Chowdhury"},
         {id:4, name: "Leigh Nilson"},
         {id:5, name: "Niesha Auger"}
        ]);

// Create view
var v = new company.views.EmployeeList({collection: c});
v.render();

以下就來探討 render function 該怎麼把 collection 套用到 template 並呈現在 UI 上