6

Can I have mobile gestures like swipe, tap, pinch etc in the Backbone.js View events? To be more specific following is my code.

Backbone.View.extend({
     initialize:function(){
        //initialization 
     },
     Events:{
          "swipe-left #homeBtn":"homeSwipe"
     },
     homeSwipe:function(){
        alert("Event Swipe left triggered!");
     }
});

Can I have the mobile gestures like swipe, swipe-left/right, pinch, tap etc to work with backbone.js?

Dipin Krishnan
  • 1,260
  • 3
  • 21
  • 41

2 Answers2

8

Download and include Hammer.js and then use Backbone view events like normal!

events:{
    'swipe': 'onSwipe'
},

initialize: function(){
    // I think you can get away doing this here once, but I have not tested.
    // If not, just move it to the `render` method
    new Hammer(this.el);
},

onSwipe: function(e){
    console.log(e.direction); // left or right
}

Also, you could take a look at my simple Backbone view Gist

Update

Based on the feedback, it looks like new Hammer(this.el) must be called on the backbone view for this to work. I've updated the example to reflect this.

Kevin Jantzer
  • 9,215
  • 2
  • 28
  • 52
  • This works like a charm. The only thing needs to be added - that 'adapter' between hammer.js and jquery should be added to make this code work. It can be found here: https://raw.github.com/EightMedia/hammer.js/master/jquery.specialevent.hammer.js – brain-geek Feb 03 '13 at 18:24
  • 3
    For this to work, I had to call the `hammer()` function on my view's `$el` like this `this.$el.hammer()` from within the `render()` method of my View. I got this from [this answer](http://stackoverflow.com/a/16092066/877353), although I do need [the jquery plugin](http://hammerjs.github.io/jquery-plugin/) for this to work – Alexandre Bourlier Apr 13 '15 at 10:18
  • 1
    @AlexandreBourlier – I updated my answer to show your said requirement. I think I've provided an example without the need for the jquery plugin though. – Kevin Jantzer Apr 13 '15 at 14:56
0

Backbone relies on jQuery.bind to manage the DOM events.

So the question is that if jQuery supports these events and looks like jQuery Mobile does, now you have to check how to integrate jQuery Mobile and Backbone.

Community
  • 1
  • 1
fguillen
  • 36,125
  • 23
  • 149
  • 210
  • Que hondas @gguillen, I honestly don't think it does. The swipe effects seem like it can target the `el` directly, but none of its children divs – Trip Nov 08 '12 at 19:39