How to integrate 'swipe' from Hammer.js in Backbone?

Question

How to integrate 'swipe' from Hammer.js in Backbone?

Navigation

#1 by (1 votes)

2

Hello!

I've been trying all day to make a swipe work with a backbone and I have not had any luck. I have a code that works but it's pretty ugly and from what I've seen it can be structured better. The problem is that when I integrate it into Backbone, it does not work at all. The code that is commented is the one that works.

I tried to follow this article , and this , and this ...

Can someone tell me what I'm doing wrong?

var app = app || {};

$(function () {

  app.tabsContent = Backbone.View.extend({
    tagname: '#tabs-container',

    events: {
      'swipe #tabs-header': 'swipeIt'
    },

    initialize: function () {
      this.$list = $('#group-list');

      this.$el.hammer();


      // let swipeTabs = document.getElementById('tabs-header');
      // let mc = new Hammer(swipeTabs);
      // mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
      // mc.on("swipe", this.swipeIt);

      app.groupCollection.fetch();
      this.listenTo(app.groupCollection, 'add', this.appendOne);
    },

    render: function () {

    },

    appendOne: function (group) {
      let view = new app.GroupView({model: group});
      this.$list.append(view.render().el);
    },

    swipeIt: function (e) {
      if (e.direction == 8) {
        console.log('Swipe up')
      } else if (e.direction == 16) {
        console.log('Swipe down')
      }

    }
  })

})

javascript backbone

asked by Pablo 12.11.2017 в 18:37

source

1 answer

derby search by join date Clean / Reset several forms

score 1 · Accepted Answer

Well I answer to myself in case it can help someone help.

It turns out that I was confusing in backbone tagname and el like similar things, using tagname instead of the el which, among other things, prevented the event from running.

Then I added the jQuery plugin for hammer.js and modified the way to call the hammer object according to the documentation :

var app = app || {};

$(function () {

app.tabsContent = Backbone.View.extend({
  el: '#tabs-container',

  events: {
  'swipe #tabs-header': 'swipeIt'
  },

  initialize: function () {
    this.render();
  },

  render: function () {
    //Cambio la forma de llamar al objeto hammer.

    let mc = this.$tabsHeader.hammer();

    //Para añadir swipeUp a hammerjs ya que no lo tiene por defecto.

    mc.data('hammer').get('swipe').set({ direction: Hammer.DIRECTION_ALL });
  },

  swipeIt: function (e) {
    if (e.gesture.offsetDirection == 8) {
      console.log('Swipe up')
    } else if (e.gesture.offsetDirection == 16) {
      console.log('Swipe down')
    }

  }
})   
})