1

我想使用 push.js 在我的 phonegap 应用程序上模拟原生转换。我使用backbone.js、zepto.js、ratchet.js、push.js 在我更改页面时不起作用。

  • 主.js：

    require.config({
       paths: {
       jquery: 'libs/zepto/zepto-min',
       ratchet: 'libs/ratchet/ratchet-min',
       push: 'libs/ratchet/push',
       underscore: 'libs/underscore/underscore-min',
       Backbone: 'libs/backbone/backbone-min',
       order: 'libs/require/order-1.0.5',
       async: 'libs/require/async',
       utils: 'libs/utils/utils',
       text: 'libs/require/text',
       templates: '../templates'
       },
       shim: {
       'jquery': {
       exports: '$'
       },
       'underscore': {
       exports: '_'
       },
       'backbone': {
       deps: ['underscore', 'jquery'],
       exports: 'Backbone'  //attaches "Backbone" to the window object
       }
       }
       });


require([
         'order!jquery',
         'order!ratchet',
         'order!push',
         'underscore',
         'Backbone',
         'router',
         'utils'

         ], function($, ratchet, push, _, Backbone, AppRouter, utils) {
        });

  • 路由器.js：

    define([
'jquery',
'ratchet',
'underscore',
'Backbone',

'views/index/IndexView',
'views/prova/ProvaView'

], function($, ratchet, _, Backbone, IndexView, ProvaView ) {

var Router = Backbone.Router.extend({
                                   routes: {
                                   "" : "index",
                                   "prova" : "prova"
                                   },

                                   index: function () {
                                   window.addEventListener('push', function(){
                                                           console.log("push event occurred")
                                                           });
                                   var indexView = new IndexView();
                                   indexView.render();

                                   },

                                   prova: function () {
                                   window.addEventListener('push', function(){
                                                           console.log("push event occurred")
                                                           });
                                   var provaView = new ProvaView();
                                   provaView.render();

                                   }
                                   });

 new Router();

 Backbone.history.start();
 });

  • indexView.js/provaView.js ：

     define([
'jquery',
'underscore',
'Backbone',
'text!templates/index/indexTemplate.html' //provaTemplate.html
], function($, _, Backbone, indexTemplate){

var IndexView = Backbone.View.extend({
                                    events: {
                                    "touchend #prova": "prova",
                                    "touchend #back": "back"

                                    },
                                    el: $('#app'),

                                    render: function(){

                                    var that = this;

                                    this.$el.html(indexTemplate);

                                    },
                                    prova: function(event) {
                                    Backbone.history.navigate("prova", {
                                                              trigger: true
                                                              });
                                    },
                                    back: function(event) {
                                    window.history.back();
                                                                                }

                                    });

return IndexView;

});

-index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/ratchet.css" />
    <title>title</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script data-main="js/main" src="js/libs/require/require.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>

-indexTemplate.html：

 <!-- Header -->
 <header class="bar bar-nav">
  <h1 class="title">Title</h1>
 </header><!-- /Header -->

 <!-- content -->
 <div class="content">
  <div class="card">
    <ul class="table-view">
        <li class="table-view-cell">
            <a class="navigate-right" id="prova" data-transition="slide-in">
                Load new page with push
            </a>
        </li>
    </ul>
 </div>
</div><!-- /content -->

-provaTemplate.html

<!-- Header -->
<header class="bar bar-nav">
 <a class="icon icon-left-nav pull-left" id="back" data-transition="slide-out"></a>
 <a class="icon icon-compose pull-right"></a>
<h1 class="title">Pagina 2</h1>
</header><!-- /Header -->

<!-- footer -->
<div class="content">
sample
</div><!-- /content -->

任何想法？提前谢谢（对不起我的英语）

4

0 回答 0