為了力求運(yùn)行速度快、響應(yīng)迅即，我們推薦使用backbone.js和zepto.js。

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

• 把你的JavaScript文件添加到應(yīng)用程序中
• 使用Backbone.js來顯示響應(yīng)迅即的界面
• 使用CSS重置樣式，減少跨平臺(tái)出現(xiàn)的不一致性
• 在應(yīng)用程序中的視圖之間實(shí)現(xiàn)示例轉(zhuǎn)場效果

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

添加的文件

• Backbone.js，負(fù)責(zé)處理歷史記錄、用戶操作以及為整個(gè)JavaScript框定結(jié)構(gòu)
• HTML5Boilerplate，旨在減少不同平臺(tái)上不一致的渲染默認(rèn)值帶來的影響
• Zepto，這個(gè)面向移動(dòng)設(shè)備的輕型框架是jQuery的替代方案，可用于DOM（文檔對(duì)象模型）處理。

開始上手

想處理應(yīng)用程序中的JavaScripts和CSS，只要把它們添加到你的index.html中，就像你在普通網(wǎng)站中進(jìn)行操作那樣：

<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庫和我們自己的兩個(gè)文件：demo.css和demo.js。

使用Backbone時(shí)，你的入口點(diǎn)應(yīng)該設(shè)置好應(yīng)用程序正常運(yùn)行所需要的各方面，然后開始運(yùn)行Backbone的歷史系統(tǒng)。

比如說，在該項(xiàng)目中，我們使用$(Demo.init)，在應(yīng)用程序啟動(dòng)時(shí)運(yùn)行下列函數(shù)，只運(yùn)行一次：

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

這里，我們使用request.ajax函數(shù)來檢索我們的推特消息，并將數(shù)據(jù)存儲(chǔ)在一個(gè)集合中，然后開始運(yùn)行Backbone。

使用Backbone.js

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

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

路由將URL映射到函數(shù)。我們?cè)谶@里定義了兩個(gè)路由：一個(gè)對(duì)應(yīng)#index()，另一個(gè)對(duì)應(yīng)#item/[item_id]。然后，將item_id作為一個(gè)參數(shù)傳遞到item()。路由負(fù)責(zé)為你整個(gè)應(yīng)用程序安排好URL。

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

不過，特別是在移動(dòng)平臺(tái)上，你的用戶期望以某種動(dòng)態(tài)轉(zhuǎn)場效果從一個(gè)視圖切換到下一個(gè)視圖；為此，你可以把Backbone視圖組織成頁面。

頁面視圖

該代碼片段顯示了我們?nèi)绾卧谶@個(gè)項(xiàng)目中實(shí)現(xiàn)頁面，當(dāng)一個(gè)頁面變得活躍時(shí)，就使用動(dòng)畫轉(zhuǎn)場效果。你還可以在此看到我們使用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); 
            // 這個(gè)解決辦法來之不易－ 
            // 僅僅使用.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); 
    } 
}); 

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

比如說，在該項(xiàng)目中，我們?yōu)樗型铺叵⒌某跏家晥D創(chuàng)建了一個(gè)頁面，并且當(dāng)用戶選擇每一單個(gè)的推特消息時(shí)也為它創(chuàng)建一個(gè)頁面。

使用Forge API的其他部分

我們已經(jīng)看到了使用forge.request.ajax來請(qǐng)求遠(yuǎn)程服務(wù)器。該項(xiàng)目還充分利用了另外一些Forge API。

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

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

click_or_tap: function(obj) { 
// 至于對(duì)象屬性，為屬性添加“點(diǎn)擊”，并使用原始值 
    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 
} 

這很重要，因?yàn)辄c(diǎn)擊事件的反應(yīng)在移動(dòng)設(shè)備上不如輕觸來得迅即。

構(gòu)建和運(yùn)行應(yīng)用程序

為了自行構(gòu)建和運(yùn)行應(yīng)用程序，請(qǐng)先取我們網(wǎng)站上注冊(cè)（https://trigger.io/）；如果你還沒有Trigger.io Forge框架，就安裝該框架，開始建立Forge環(huán)境（操作步驟詳見http://docs.trigger.io/en/v1.3/forge/index.html）。

然后，

• 為你的應(yīng)用程序創(chuàng)建一個(gè)新的目錄，使用cd命令進(jìn)入到該目錄，運(yùn)行“forgecreate -n Demo”，在你的帳戶中創(chuàng)建Demo（演示）應(yīng)用程序。

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

• 運(yùn)行forge build，構(gòu)建應(yīng)用程序的每個(gè)版本（這步操作第一次速度很慢——但隨后的構(gòu)建過程快若閃電！）

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

• 如果你連接上了安卓手機(jī)，forge run android會(huì)將該應(yīng)用程序部署到你的手機(jī)上，進(jìn)行測試（確保打開了USB調(diào)試模式）。

• 盡情享受吧！

就是這樣

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