Javascript Can'；不要让Meteor使用轻量级JS touch库hammer.JS

我读过《流星》中整合触摸事件的文章

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

我想我应该试试。（我不想要大部分JQuery mobile。）

我可以让它在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/>");
});

这两种方法都没有奏效

我做错了什么

---

还有其他人在Meteor中成功集成了JS touch库吗？我注意到在另一篇帖子中引用了它，但我也无法让它正常工作。

将

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

Template.myTemplate.swipme=函数（）{
Meteor.defer（函数（）{
var$sw=$（“#swipme”）；
$sw.on（'hold tap swipe Double tap transformstart transform transformend dragstart DragGend swipe release'（按住轻按滑动双轻按转换启动转换转换结束拖动开始拖动拖动拖动拖动拖动拖动滑动释放'）功能（事件）{
event.preventDefault（）；
console.log（“类型：“+event.Type+”，手指：“+event.touchs.length+”，方向：“+event.Direction+””
）；
});
});
};

---

或者，您也可以使用Meteor.startup，但由于它只运行一次，因此不能保证每次都能运行（如果它必须在添加第一个DOM元素之后运行，则不知道）一旦任何DOM元素被更新或添加，它就不起作用了。

因为我在搜索如何将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“

是我的模板的一部分。 刚刚用meteor 0.7.0.1在我运行ios7的手机上测试了它，可以确认它的工作情况。 显然，我正在使用hammer.js的jquery插件，并将其加载到/client/js/中。

---

但我看到的唯一缺点是，这样做会丢失“this”的数据上下文。如果我用的是流星自己的事件，那就不一样了。但我真的只需要上下文来访问_id“this”，我可以通过模板将其放入数据属性中

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

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

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

---

谢谢你，汤姆<模板中的code>Meteor.defer完成了这一任务。然而，在它工作之后，很明显我的触摸和点击事件之间的映射并不是特别优雅。我基本上是从

Meteor.defer

函数中调用

Template.myTemplate.events['click#myClickElement']（）

。这已经足够好了，但是当我映射触摸事件时，

click

元素中可用的

This

与

This

不一样，所以有点复杂。如果

Template.myTemplate.events

object；-）中有更多本机对触摸事件的支持，那就太好了

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

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