无法让 Meteor 使用轻量级的 JS 触摸库，锤子.js

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

本文关键字：触摸 JS js 锤子 轻量级 Meteor      更新时间：2023-09-26

我已经阅读了关于在Meteor中集成触摸事件的现有帖子。

智慧似乎是，虽然 API 仍在不断发展，但最好避免使用基于包的方法，而只对客户端上显式包含的触摸事件使用轻量级库。

我想我会尝试锤子.js。（我不想要大部分的JQuery移动。

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

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

我已经尝试过这两种方法：

-在主应用程序.js文件中的$(document).ready内，以及

-定义为相关模板的模板.js文件中的函数，当我在该模板的事件对象中调用时：

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

这两种方法都没有奏效。

我做错了什么？

有没有人成功地在Meteor中集成了JS触摸库？我注意到jquery.fingers在其他一篇文章中被引用，但我也无法让它工作。

将{{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 元素更新或添加，这将不起作用。

因为我在寻找如何使用锤子.js和流星.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'是我模板的一部分。刚刚使用meteor 7在运行ios7的手机上对其进行了测试，0.7.0.1，并且可以确认其工作。显然我正在使用 hammer.js' jquery 插件，并将其加载到/client/js/中。但是我看到这样做的唯一缺点是丢失了"this"的数据上下文。如果我使用流星自己的事件，情况就不一样了。但我真的只需要上下文来访问_id"this"，我可以通过模板将其放入数据属性中

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

Template.name.events({
    'swipe .article': function() {
        //your functions
    }
})
Template.name.rendered = function () {
    this.$('.article').hammer();
}
相关文章：