如何让 Hammer JS 与 Backbone 一起工作

Question

我知道有人问过这个问题 here, there, and there。

当我努力寻找正确的组合时，基于这些答案，我想我应该在这里总结一下，这样我们都可以更清楚、更容易地找到它。

Answer 1

首先，可以让 Hammer 与 Backbone 一起完美地工作。

要达到这个目标，您只需要遵循这个列表：

将 hammer.js dependency 包含到您的项目中。
将 Hammer's jQuery plugin 包含到您的项目中
创建一个 Hammer Manager 实例，以便您可以侦听 Hammer 事件。您应该在触发触摸事件的同一元素或封闭元素（通常为 your view element）上启动实例。因此，像这样的东西应该出现在你的视图的 render() 函数的末尾：
```
this.$el.hammer(); // Instantiates Hammer Manager
```
监听一个事件，就像你通常监听任何 javascript/jQuery 事件一样：

events : { "pan #some_selector": "some_handler", }
在你的事件处理程序中，你可以在gesture属性中访问事件的属性，而不是像Hammer的文档中写的那样直接访问，如下：

function some_handler : function(event) { console.log(event.gesture.deltaX); },

这应该可以让 Hammer 与您的 Backbone 应用程序完美配合。我希望这有帮助！ :)

Answer 2

使用 Require、Backbone 和 Hammer 进行了一些努力。这是对我有用的。

需要配置：

require.config({
    paths: {
        "jquery": "/bower_components/jquery/jquery",
        "underscore": "/bower_components/underscore/underscore",
        "backbone": "/bower_components/backbone/backbone",
        "hammerjs": "/bower_components/hammerjs/hammer",
        "jquery-hammerjs": "/bower_components/jquery-hammerjs/jquery.hammer"
    },

    shim: {
        "backbone": {
            deps: [ "jquery-hammerjs", "underscore" ],
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        }
    }
});

查看文件

define( "myview", [ "backbone" ], function( Backbone ) {
    "use strict";

    return Backbone.View.extend( {
        el: ".my-el",

        events: {
            "tap .child-of-my-el": "handleTap"
        },

        initialize: function() {
            this.$el.hammer( { domEvents: true } );
        }
    } );
} );

注意 domEvents 选项。事件委托不适用于此。 Hammer docs states that this may slow things down a bit所以YMMV。

如何让 Hammer JS 与 Backbone 一起工作

How to get Hammer JS to work with Backbone

jquery

backbone.js

backbone-events

hammer.js