javascript - 在没有 jQuery 的 Backbonejs 中滑出

标签 javascript backbone.js requirejs

我的滑出功能有问题,如 this在我的 Backbone 应用程序中。当我尝试将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();
});

非常感谢!

最佳答案

我使用 SwipeOut、Hammer、Jquery 和 Backbone 创建了一个示例 Web 应用程序。我已将代码提交给 github repository 。必须更改 Swipeout 以提供 AMD 版本,因此使用此 swipeout.js文件。

不要从index.html加载hammer和swipeout,而是从任何javascript文件异步加载它们。 进行以下更改:

  1. 从 index.html 中删除 swipeout 脚本标记
  2. 更新 main.js,如下所示。由于 swipe.js、Backbone、underscore 和 jquery 不是 AMD 文件,因此您需要定义 shim 配置。请注意,Hammer 是 AMD 模块,因此不需要对其进行 shim 配置。出于演示目的,我在应用模块中加载了 Hammer 和 swipeout 文件。
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();
});

请告诉我是否解决了问题。

关于javascript - 在没有 jQuery 的 Backbonejs 中滑出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22425440/

相关文章:

javascript - 如何从主框架测试 Fetch API 是否在 Web Worker 中可用

javascript - 如何在对话框关闭时禁用backbone.js添加/#

javascript - 如何使用浏览器并行加载但仍然使用 RequireJS 保持脚本的顺序

javascript - 对模块化 Javascript 网络应用程序进行单元测试

javascript - 使用 requirejs + uglify 限制行长度

javascript - 中止(停止)运行异步/等待功能的正确方法?

javascript - chrome 扩展的运行时错误

javascript - Yii CGridView 使用键盘的箭头向上和向下移动选定的行

jquery-ui - 带有 Backbone 和 Marionette 的 Jquery UI 对话框

JavaScript 语法 : what is ({ }) Is it a function or object?