如何让Hammer JS与Backbone一起使用？

Question

我知道这个问题已经在这里、那里和那里被问到过。

基于那些答案，我为了能使我们都更加清晰、更容易地找到正确的组合方式而苦苦挣扎了好几个小时。现在，我想在这里做一个总结。

- Alexandre Bourlier

Answer 1

首先，可以让Hammer与Backbone完美地配合使用。

为了达到这个目标，您只需要遵循以下步骤：

1. Include the hammer.js dependency into your project.
2. Include Hammer's jQuery plugin into your project

3. Create a Hammer Manager instance so you can listen for Hammer events. You should initiate the instance on the same element you are triggering the touch events, or an enclosing one (typically, your view element). Thus something like this should be present at the end of your View's render() function :

   this.$el.hammer(); // Instantiates Hammer Manager
   

4. Listen for an event, as you normally would for any javascript/jQuery event :

   events : { "pan #some_selector": "some_handler", }

5. In your event handler, you can access the event's properties within the gesture attribute, not directly as written in Hammer's documentation, as follows :

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

这将使Hammer与你的Backbone应用程序完美协作。 希望这有所帮助！ :)

- Alexandre Bourlier

---

#4 如何监听事件？这只是一个字面对象吗？你如何使用它？ - Frederik Krautwald

嗯，我认为你需要学习一下Backbone视图的工作原理，以及如何在视图中声明事件映射。就我所知，这是我找到的最好的学习BackboneJS的资源。希望这能帮到你。 - Alexandre Bourlier

我不知道＃4具体是BackboneJS，因为其他部分都不是。 - Frederik Krautwald

它们确实有关，3和5也与Backbone相关。 - Alexandre Bourlier

好的。我发现它们非常与hammerjs和jquery相关。 - Frederik Krautwald

Answer 2

使用Require、Backbone和Hammer有些困难，我花了一些时间才搞定。以下是我的解决方案。

Require配置：

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文档指出这可能会稍微降低速度，因此结果可能因人而异。

- mike.pj