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.

Answer 1

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.