无法让 Meteor 与轻量级 JS 触摸库hammer.js 一起工作答案

【问题标题】：Can't get Meteor to work with the light-weight JS touch library, hammer.js无法让 Meteor 与轻量级 JS 触摸库hammer.js 一起工作
【发布时间】：2012-06-30 23:22:43
【问题描述】：

我已阅读 the existing posts 关于在 Meteor 中集成触摸事件的内容。

智慧似乎是，虽然 API 仍在发展，但最好避免使用基于包的方法，而只使用轻量级库来处理您在客户端上明确包含的触摸事件。

我想我会试试hammer.js。（我不想要大部分 JQuery 移动版。）

我可以让它在 Meteor 之外正常工作。

在 Meteor 中，我只是在尝试他们的演示代码的简单版本：

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/>");
});

这两个我都试过了：

-在主 application.js 文件中的$(document).ready 内，以及

- 定义为相关模板的 template.js 文件中的一个函数，然后我在该模板的事件对象中调用：

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

这两种方法都没有奏效。

我做错了什么？

有没有其他人在 Meteor 中成功集成了一个 JS 触摸库？我注意到 jquery.fingers 在其他帖子中被引用，但我也无法正常工作。

【问题讨论】：

标签： javascript meteor touch hammer.js

【解决方案1】：

将{{swipeme}} 添加到myTemplate 并尝试使用Meteor.defer，它将在模板渲染后运行代码，确保它可以运行：

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/>");
    });
  });
};

或者，您也可以使用Meteor.startup，但由于它只运行一次（不知道它是否必须在添加第一个 DOM 元素后运行），因此可能无法保证每次都有效，这不会任何 DOM 元素更新或添加后即可工作。

【讨论】：

谢谢汤姆。模板中的Meteor.defer 成功了。然而，在它工作之后，很明显我在触摸和点击事件之间的映射并不是特别优雅。我基本上从Meteor.defer 函数中调用Template.myTemplate.events['click #myClickElement']()。这工作得很好，但是当我映射触摸事件时，click 元素中可用的this 与this 不同，所以它有点繁琐。如果在 Template.myTemplate.events 对象中对触摸事件有更多原生支持，那就太好了；-)

【解决方案2】：

因为我在搜索如何将hammer.js 与meteor.js 一起使用时遇到了这个问题，所以我觉得我应该贡献我发现对我有用的东西。

在我的项目中，每个模板都有一个 javascript 文件，因此我可以组织我的助手和事件。

我在 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');
    })
  });

}

'.listItem' 是我模板的一部分。刚刚在我的使用流星 0.7.0.1 运行 ios7 的手机上对其进行了测试，并且可以确认它的工作原理。显然我正在使用hammer.js 的jquery 插件，并将其加载到/client/js/ 中。但我看到这样做的唯一缺点是丢失“this”的数据上下文。如果我使用流星自己的事件，情况就不一样了。但我真的只需要上下文来访问 _id 'this' 我可以通过模板放入数据属性

【讨论】：

【解决方案3】：

我也一直试图让hammer.js 与Meteor 一起工作一段时间，但直到现在都没有成功。我刚刚发现你如何让它工作。事实证明这真的很容易。注意我这里使用的是jquery版本的hammer。

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

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

【讨论】：