[转载] 使用backbone.js、zepto.js和trigger.io开发html5 app -凯发ag旗舰厅登录网址下载

来源：http://mobile.51cto.com/web-343388.htm

-------------------------------------------------------------------------------

为了力求运行速度快、响应迅即，我们推荐使用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调试模式）。

• 尽情享受吧！

就是这样

你可以随意处理源代码。我们希望一切都很清楚。

转载于:https://www.cnblogs.com/jiemao/archive/2012/08/17/2643498.html

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的[转载] 使用backbone.js、zepto.js和trigger.io开发html5 app的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。