不使用jQuery在Backbonejs中刷卡

Adam 发表于 Dev

宏观垫

我在主干应用程序中遇到这种滑动功能问题。当我尝试将Hammer.js添加到HEAD时出现错误：

Uncaught TypeError: Object [object Array] has no method 'addEventListener'  hammer.min.js:7

您是否知道除Hammer.js之外的其他JavaScript，并且不依赖于jQuery在骨干网中正常工作？

我的头

<head>
<meta charset="utf-8">
<title>Backbone App</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script data-main="js/main" src="js/libs/require/require.js"></script>
<script src="js/libs/utils.js"></script>
<script src="js/libs/hammer/swipeout.js"></script>
</head>

我的main.js

require.config({
  paths: {
    'jquery': 'libs/jquery/jquery.min',
    'underscore': 'libs/lodash/lodash.min',
    'backbone': 'libs/backbone/backbone.min',
    'templates': '../templates',
    'hammer': 'libs/hammer/hammer.min'
  },
    shim : {

    }
});
require(['jquery'], function($) {
    return {};
});

require([
  // Load our app module and pass it to our definition function
  'app'

], function(App){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});

非常感谢！

曼尼什（Manish Mulimani）

我使用SwipeOut，Hammer，Jquery和Backbone创建了一个示例Web应用程序。我已经将代码提交到github仓库。必须更改Swipeout以提供它的AMD版本，因此请使用此swipeout.js文件。

与其从index.html加载锤和刷卡，不如从任何javascript文件中异步加载它们。进行以下更改：

从index.html移除swipeout脚本标签
如下所示更新main.js。由于swipe.js，Backbone，下划线和jquery是非AMD文件，因此您需要定义填充程序配置。请注意，Hammer是AMD模块，因此不需要垫片配置。为了演示，我将锤子和刷卡文件加载到应用程序模块中。

require.config({
  paths: {
    'jquery': 'libs/jquery/jquery.min',
    'underscore': 'libs/lodash/lodash.min',
    'backbone': 'libs/backbone/backbone.min',
    'templates': '../templates',
    'hammer': 'libs/hammer/hammer.min',
    'swipeout': 'libs/hammer/swipeout'
  },
   shim : {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    },
    'jquery': {
        exports: '$'
    },
    'swipeout': {
       exports: 'SwipeOut'
    }
  }
});

require([
  // Load our app module and pass it to our definition function
  'app',
  'hammer',
  'swipeout',
  'jquery'

], function(App,Hammer,Swipeout, $){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});