使用backbone.js、zepto.js和trigger.io開發HTML5 App

爲了力求運行速度快、響應迅即，咱們推薦使用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調試模式）。

盡情享受吧！

就是這樣

你能夠隨意處理源代碼。咱們但願一切都很清楚。