使用主干和cordova构建单页应用程序并跟踪导航

时间:2013-05-28 14:06:14

标签: jquery mobile backbone.js cordova

我正在使用backbone,jquery和cordova 2.7.0构建单页应用程序。

我的首页看起来像这样

 <div id="activity-container">
     <form action="/login" id="login-form" onsubmit="return false;">
        <input id="username" type="text"/>
        <input id="password" type="password"/>
        <a href="#login">Sign In</strong></a>
    </form>
 </div>

我按如下方式编写了loginview

 LoginView = Backbone.View.extend({
    el: $("#login-form"),
    events: {
        "click #login": "authenticate"
    },
    authenticate: function(){
        new SecondView();
    }
});

第二个视图只需要一些模板,然后在div中使用id =“acitivity-container”进行渲染。我把它写成

   SecondView = Backbone.View.extend({
    el:$("#activity-container"),
    template: _.template( $("#someTemplate").html() ),
    initialize: function () {
        this.$el.html( this.template 
    },
    render: function () {           
        this.$el.html( this.template );
        return this;
    }
  });

我只是想检查一下。所以,我的模板现在是任何静态HTML。实施例

   <script type="text/someTemplate">
      <p>Anything here<p>
   </script>

我使用以下代码初始化应用

 document.addEventListener('deviceready', onDeviceReady, false);
     function onDeviceReady() {
            new loginView();
            Backbone.history.start();
     }

这很好用。当我点击登录时,它会带我到预约视图。现在,当我在键盘上按“ESC”时,这将使我退出应用程序而不是返回loginview。这只是意味着我不能回去。我们怎样才能解决这个问题?

我的想法是,我将构建每个视图并将它们挂钩到“activity-container”div。但是,似乎这可能是个坏主意。任何人都可以建议我使用backbone和cordova构建单页应用程序的任何开始示例吗?

1 个答案:

答案 0 :(得分:0)

不确定使用cordova会有什么不同,然后你会如何在网络浏览器上进行,但我建议你在文档中查看路由器和历史。

http://backbonejs.org/#Router

http://backbonejs.org/#History-start

同时研究这个问题,可能是一个类似的问题:

Backbone.history.start() blocks back button from leaving the page

您也可以查看 window.history.back()

我想我唯一不清楚的另一种可能性是你是否只是试图覆盖Cordova如何处理Esc键。