Can't get Meteor to work with the light-weight JS touch library, hammer.js

Question

I've read the existing posts on integrating touch events in Meteor.

The wisdom seems to be that while the API is still evolving, it might be best to avoid a package-based approach and instead just use a light-weight library for touch events that you include explicitly on the client.

I thought I'd try out hammer.js. (I don't want the bulk of JQuery mobile.)

I can get it working fine outside of Meteor.

Inside Meteor, I'm just trying out a simple version of their demo code:

var $sw = $('#swipeme');
$sw.on('hold tap swipe doubletap transformstart transform transformend dragstart drag dragend swipe release', function (event) {
event.preventDefault();
console.log("Type: " + event.type + ", Fingers: " + event.touches.length + ", Direction: " + event.direction + "<br/>");
});

I've tried this both:

-inside $(document).ready in the main application.js file, and

-defined as a function in the template.js file of the relevant template, when I then called inside that template's events object:

Template.myTemplate.events = {
'click #myElement': function(){
myTouchFunction();
}
}

and neither approach has worked.

What am I doing wrong?

Has anyone else successfully integrated a JS touch library in Meteor? I noticed jquery.fingers was referenced in one of the other posts, but I couldn't get that working either.

score 3 · Accepted Answer · answered Jul 01 '12 at 01:52

Add {{swipeme}} to myTemplate and try to use Meteor.defer which will run the code after the template has been rendered, ensuring that it can run:

Template.myTemplate.swipeme = function () {
  Meteor.defer(function() {
    var $sw = $('#swipeme');
    $sw.on('hold tap swipe doubletap transformstart transform transformend dragstart drag dragend swipe release', function (event) {
      event.preventDefault();
      console.log("Type: " + event.type + ", Fingers: " + event.touches.length + ", Direction: " + event.direction + "<br/>");
    });
  });
};

Alternatively, it could be that you could use Meteor.startup as well but that might not be guaranteed to work every time given that it only runs once (dunno if it necessarily runs after the first DOM elements are added) which will not work once any DOM element gets updated or added.

Thanks Tom. `Meteor.defer` in the template did the trick. Having got it working, however, it's clear my mapping between touch and click events is not particularly elegant. I basically call `Template.myTemplate.events['click #myClickElement']()` from within the `Meteor.defer` function. This works well enough, but the `this` that is available within the `click` element proper is not the same `this` when I map the touch event, so it's a bit fiddly. It will be great when there's more native support for touch events within the `Template.myTemplate.events` object ;-) — jonnyrichards, Jul 01 '12 at 14:45

score 2 · Answer 2 · answered Jan 17 '14 at 05:04

Because I came across this when I was searching for how to use hammer.js with meteor.js, I feel like I should contribute what I've found to work for me.

In my project, i have a javascript file for each template, so i can organize my helpers and events.

I have this inside template_name.js

Template.templatename.events({});
Template.templatename.helpers({});

if (Meteor.isClient) {

  $(function () {
    var hammertime = $('body').hammer({
      swipe_velocity: 0.45
    });


    hammertime.on('doubletap', '.listItem', function() {
      alert('yay');
    })
  });

}

Where '.listItem' is a part of my template. Just tested it on my phone running ios7 using meteor 0.7.0.1, and can confirm its working. Obviously I'm using hammer.js' jquery plugin, and have it loaded in /client/js/. But the only downside I'm seeing doing it this way, is losing the data context for 'this'. It's not going to be the same if i was using meteor's own events. But I really only need the context to access the _id 'this' which I can just put in a data-attribute through the template

score 0 · Answer 3 · answered Dec 14 '14 at 16:21

I've been trying to get hammer.js to work with Meteor for some time too but with no success until now. I just found out how you cán get it to work. Turns out it actually is really really easy. Note I am using the jquery version of hammer here.

Template.name.events({
    'swipe .article': function() {
        //your functions
    }
})

Template.name.rendered = function () {
    this.$('.article').hammer();
}

Can't get Meteor to work with the light-weight JS touch library, hammer.js

3 Answers3