Custom events with ember.js and hammer.js

application.js

App = Ember.Application.create({
  customEvents: {
    swipeLeft: 'swipeLeft',
    swipeRight: 'swipeRight',
    swipeLeftTwoFinger: 'swipeLeftTwoFinger',
    swipeRightTwoFinger: 'swipeRightTwoFinger',
    dragDown: 'dragDown',
    dragUp: 'dragUp',
    dragDownTwoFinger: 'dragDownTwoFinger',
    dragUpTwoFinger: 'dragUpTwoFinger'
  }
});

custom_view.js

App.CustomView = Ember.View.extend({
  swipeLeft: function(){
    console.log('swipeLeft');
  },

  swipeLeftTwoFinger: function(){
    console.log('swipeLeft with two fingers')
  },

  dragUp: function(){
    console.log('dragging up')
  },

  didInsertElement: function(){
    this.gm = new App.GestureManager(this.$())
  },

  willDestroyElement: function(){
    this.gm.destroy();
  }
})

gesture_manager.js

//TODO: check scrolling behavior on surface (https://github.com/EightMedia/hammer.js/issues/310)
//TODO: when/where do we unregister the gestures?

App.GestureManager = Ember.Object.extend({
  init: function(el){
    // el needs to be a jQuery element
    this.el =  el;

    // helper for desktop simulation
    // pressing the alt key will simulate
    // a second finger in a gesture
    var keys = {
      'alt': false
    };

    $('body').keydown(function(e){
      keys['alt'] = e.altKey && e.altKey
      //console.log(keys)
    })

    $('body').keyup(function(e){
      keys['alt'] = e.altKey && e.altKey
      //console.log(keys)
    })

    this.keys = keys;

    // setup hammer js listeners

    this.hammerConf = {
      // needed, because by default only 1 point
      // gestures are accessible
      swipe_max_touches: 2
    };

    this.boundHandleSwipeLeft = _.bind(this.handleSwipeLeft, this);
    this.boundHandleSwipeRight = _.bind(this.handleSwipeRight, this);
    this.boundHandleSwipeDown = _.bind(this.handleSwipeDown, this);
    this.boundHandleDragDown = _.bind(this.handleDragDown, this);
    this.boundHandleDragUp = _.bind(this.handleDragUp, this);

    this.el.hammer(this.hammerConf).on("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(this.hammerConf).on("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(this.hammerConf).on("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(this.hammerConf).on("dragdown", this.boundHandleDragDown);
    this.el.hammer(this.hammerConf).on("dragup", this.boundHandleDragUp);
  },

  destroy: function(){
    this.el.hammer(this.hammerConf).off("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(this.hammerConf).off("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(this.hammerConf).off("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(this.hammerConf).off("dragdown", this.boundHandleDragDown);
    this.el.hammer(this.hammerConf).off("dragup", this.boundHandleDragUp);

    this.boundHandleSwipeLeft = null;
    this.boundHandleSwipeRight = null;
    this.boundHandleSwipeDown = null;
    this.boundHandleDragDown = null;
    this.boundHandleDragUp = null;
  },

  isTwoFinger: function(e){
    var multiPoint = e.gesture.touches.length > 1;
    //console.log("points:", e.gesture.touches.length)

    if(this.keys['alt'] == true){
      multiPoint = true;
    }

    return multiPoint;
  },

  handleSwipeLeft: function(e){
    e.type = this.isTwoFinger(e) ? 'swipeLeftTwoFinger' : 'swipeLeft'
    this.el.trigger(e)
  },

  handleSwipeRight: function(e){
    e.type = this.isTwoFinger(e) ? 'swipeRightTwoFinger' : 'swipeRight'
    this.el.trigger(e)
  },

  handleSwipeDown: function(e){
    e.type = this.isTwoFinger(e) ? 'swipeDownTwoFinger' : 'swipeDown'
    this.el.trigger(e)
  },

  handleDragDown: function(e){
    e.type = this.isTwoFinger(e) ? 'dragDownTwoFinger' : 'dragDown'
    this.el.trigger(e)
  },

  handleDragUp: function(e){
    e.type = this.isTwoFinger(e) ? 'dragUpTwoFinger' : 'dragUp'
    this.el.trigger(e)
  }
})

This may help those looking to respond to gestural touch events in their Ember.js views using Hammer.js as the gesture engine: https://github.com/chriswessels/ember-hammer

(Disclaimer: I am the author of this project)

Here, another gist with my integration example.