Question

我知道这已被问及here，there和there。

当我努力寻找合适的组合时，根据这些答案，我想我会在这里总结一下，所以我们都能更清楚，更轻松地找到它。

Answer 1

首先，有可能让Hammer与Backbone完美配合。

要达到这个目标，您只需要按照以下列表：

将hammer.js dependency包含在项目中。
在项目中加入Hammer's jQuery plugin
创建一个Hammer Manager实例，以便您可以收听Hammer事件。您应该在触发触摸事件的同一元素或封闭事件（通常为your view element）上启动实例。因此，类似的内容应出现在View 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合作

2 个答案: