2

我已经阅读了有关在 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/>");
});

这两个我都试过了：

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

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

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

两种方法都没有奏效。

我究竟做错了什么？

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

4

3 回答 3

3

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

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 元素获取，它将无法工作更新或添加。

于 2012-07-01T01:52:19.990 回答
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' 我可以通过模板放入数据属性

于 2014-01-17T05:04:31.210 回答
0

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

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

Template.name.rendered = function () {
    this.$('.article').hammer();
}
于 2014-12-14T16:21:35.560 回答