為了力求運行速度快、響應迅即，我們推薦使用backbone.js和zepto.js。

為了讓這個過程更有意思，我們開發了一個小小的示例項目，使用CSS重置樣式、Backbone.js和帶轉場效果的幾個頁面。我們的項目會顯示Trigger推特更新內容和單個的推特消息。與往常一樣，我們將使用同一個HTML5代碼庫創建安卓和iOS應用程序。在這個過程中，我們將介紹如何：

• 把你的JavaScript文件添加到應用程序中
• 使用Backbone.js來顯示響應迅即的界面
• 使用CSS重置樣式，減少跨平臺出現的不一致性
• 在應用程序中的視圖之間實現示例轉場效果

你可以在此基礎上隨意開發自己的項目——這是開發新項目的良好基礎！代碼放在github上，詳見：https://github.com/trigger-corp/Forge-Bootstrap。

添加的文件

• Backbone.js，負責處理歷史記錄、用戶操作以及為整個JavaScript框定結構
• HTML5Boilerplate，旨在減少不同平臺上不一致的渲染默認值帶來的影響
• Zepto，這個面向移動設備的輕型框架是jQuery的替代方案，可用于DOM（文檔對象模型）處理。

開始上手

想處理應用程序中的JavaScripts和CSS，只要把它們添加到你的index.html中，就像你在普通網站中進行操作那樣：

<link rel="stylesheet" href="css/reset.css"> 
<link rel="stylesheet" href="css/demo.css"> 
<script type="text/javascript" src="js/lib/zepto.min.js"></script> 
<script type="text/javascript" src="js/lib/underscore-min.js"></script> 
<script type="text/javascript" src="js/lib/backbone-min.js"></script> 
<script type="text/javascript" src="js/demo.js"></script> 

里，我們只使用了HTML5樣板重置樣式（reset.css）、JavaScript庫和我們自己的兩個文件：demo.css和demo.js。

使用Backbone時，你的入口點應該設置好應用程序正常運行所需要的各方面，然后開始運行Backbone的歷史系統。

比如說，在該項目中，我們使用$(Demo.init)，在應用程序啟動時運行下列函數，只運行一次：

// 應用程序啟動時，只調用一次 
init: function () { 
    // 獲取Trigger推特更新內容 
    forge.request.ajax({ 
        url: "https://twitter.com/statuses/user_timeline/14972793.json", 
        dataType: "json", 
        success: showIndex 
    }); 
// 一旦我們有了Trigger推特更新內容，就調用 
    function showIndex(data) { 
        // 把初始數據保存起來 
        Demo.items = new Demo.Collections.Items(data); 
        // 建立Backbone 
        Demo.router = new Demo.Router(); 
        Backbone.history.start(); 
    } 
} 

這里，我們使用request.ajax函數來檢索我們的推特消息，并將數據存儲在一個集合中，然后開始運行Backbone。

使用Backbone.js

Backbone.history.start()啟動Backbone的window.onhashchange事件訂閱。當URL的某片段變化時，就使用routes.js中定義的路由：

routes: { 
    "" : "index",          // 入口點：沒有哈希分片或# 
    "item/:item_id":"item"  // #item/id 
}, 

路由將URL映射到函數。我們在這里定義了兩個路由：一個對應#index()，另一個對應#item/[item_id]。然后，將item_id作為一個參數傳遞到item()。路由負責為你整個應用程序安排好URL。

使用Backbone來管理Forge應用程序里面的視圖是個好辦法：我們不僅在歷史堆棧里面構建URL（比如說，這意味著“后退”按鈕在安卓平臺上可以按預期的方式工作），我們還能夠全面控制在應用程序中顯示的內容，又不必借助慢騰騰的頁面裝入機制。

不過，特別是在移動平臺上，你的用戶期望以某種動態轉場效果從一個視圖切換到下一個視圖；為此，你可以把Backbone視圖組織成頁面。

頁面視圖

該代碼片段顯示了我們如何在這個項目中實現頁面，當一個頁面變得活躍時，就使用動畫轉場效果。你還可以在此看到我們使用Zepto用于DOM處理。

Demo.Views.Page = Backbone.View.extend({ 
    className: "page", 
    initialize: function () { 
        this.render(); 
    }, 
    show: function () { 
        $('.page').css({"position": "absolute"}); 
        var direction_coefficient = this.options.back ? 1 : -1; 
        if ($('.page').length) { 
            var $old = $('.page').not(this.el); 
            // 這個解決辦法來之不易－ 
            // 僅僅使用.css(property, '')不管用！ 
            $old.get(0).style["margin-left"] = "" 
            $old.get(0).style["-webkit-transform"] = "" 
            this.$el.appendTo('body').hide(); 
            this.$el.show().css( 
                {"margin-left": 320 * direction_coefficient}); 
            this.$el.anim( 
                {translate3d: -320 * direction_coefficient +'px,0,0'}, 
                0.3, 'linear'); 
            $old.anim( 
                {translate3d: -320 * direction_coefficient + 'px,0,0'}, 
                0.3, 'linear', function() { 
                    $old.remove(); 
                    $('.page').css({"position": "static"}); 
            }); 
        } else { 
            this.$el.appendTo('body').hide(); 
            this.$el.show(); 
        } 
        window.scrollTo(0, 0); 
    } 
}); 

如果你希望，可以在你自己的視圖中實現這個頁面，并使用show()方法從一個頁面切換到另一個頁面。

比如說，在該項目中，我們為所有推特消息的初始視圖創建了一個頁面，并且當用戶選擇每一單個的推特消息時也為它創建一個頁面。

使用Forge API的其他部分

我們已經看到了使用forge.request.ajax來請求遠程服務器。該項目還充分利用了另外一些Forge API。

在expand_item()中，我們使用forge.tabs.open()，以一種跨平臺的方式打開外部頁面新標簽頁。open()的說明文檔在此。

最后，我們使用了click_or_tap()函數中的forge.is，以便我們能夠監聽移動設備上的輕觸事件（tap event），以及其他設備上的點擊事件（click event）。易于檢測平臺的說明文檔在此。

click_or_tap: function(obj) { 
// 至于對象屬性，為屬性添加“點擊”，并使用原始值 
    var new_obj = {}; 
    for(var property in obj) { 
        if (obj.hasOwnProperty(property)) { 
            if (forge.is.mobile()) { 
                new_obj["tap " + property] = obj[property]; 
            } 
            else { 
                new_obj["click " + property] = obj[property]; 
            } 
        } 
    } 
    return new_obj 
} 

這很重要，因為點擊事件的反應在移動設備上不如輕觸來得迅即。

構建和運行應用程序

為了自行構建和運行應用程序，請先取我們網站上注冊（https://trigger.io/）；如果你還沒有Trigger.io Forge框架，就安裝該框架，開始建立Forge環境（操作步驟詳見http://docs.trigger.io/en/v1.3/forge/index.html）。

然后，

• 為你的應用程序創建一個新的目錄，使用cd命令進入到該目錄，運行“forgecreate -n Demo”，在你的帳戶中創建Demo（演示）應用程序。

• 把教程代碼拷貝到src目錄中，覆蓋forge之前創建的樣板代碼。

• 運行forge build，構建應用程序的每個版本（這步操作第一次速度很慢——但隨后的構建過程快若閃電！）

• 運行forge run android或forge run ios，查看應用程序（你需要先安裝安卓模擬器或iPhone模擬器——欲知詳情，請參閱我們的說明文檔：http://docs.trigger.io/en/v1.3/android/getting-started.html）。

• 如果你連接上了安卓手機，forge run android會將該應用程序部署到你的手機上，進行測試（確保打開了USB調試模式）。

• 盡情享受吧！

就是這樣

你可以隨意處理源代碼。我們希望一切都很清楚。