How to get Hammer JS to work with Backbone

Question

I know this has already been asked here, there, and there.

As I struggled for hours finding out the right combination, based on those answers, I thought I would sum it up here, so WE all can find it more clearly and easily.

Answer 1

First of all, it is possible to get Hammer to work flawlessly with Backbone.

To reach this goal, you just need to follow this list :

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); },

This should get Hammer to work flawlessly with your Backbone application. I hope this helps! :)