Meteor JS：我应该如何将事件绑定到Meteor中的窗口？

Question

我试图在Meteor窗口外检测一个鼠标。 我试过这个，但window似乎不起作用：

Template.layout.events({
  'mouseup window' : function(e) {
    console.log("mouseup");
  }
});

我应该如何将事件绑定到Meteor中的窗口？

Answer 1

下面的代码片段将在创建模板时绑定事件处理程序，并在销毁模板时解除绑定。 应该给你你正在寻找的行为。

var layoutMouseUpHandler = function(e) {
    console.log('window.mouseup');
};

Template.layout.onCreated(function() {
    $(window).on('mouseup', layoutMouseUpHandler);
});

Template.layout.onDestroyed(function() {
    $(window).off('mouseup', layoutMouseUpHandler);
});

请注意，事件绑定在onCreated处理程序中，因此当事件触发时，模板可能还没有呈现。 如果处理程序与DOM交互，则需要检查它。 它没有绑定在onRendered处理程序中，因为如果重新呈现模板，那么会导致mouseup处理程序多次绑定。

编辑：正如Serkan在下面提到的，当模板插入DOM时，新的UI引擎只调用onRendered一次。 如果您的事件处理程序将与DOM交互，这使它成为比onCreated更好的选择。

Answer 2

这不是典型的Meteor用例，并且Meteor没有为此类行为提供任何特殊帮助（至少在此刻）。 所以使用典型的jQuery解决方案。 只要确保它包含在Meteor.startup() 。

Meteor.startup(function() {
  $(window).mouseup(function() {...});
});

Answer 3

流星几乎是1.0，将发布一个新的ui引擎。 根据流星维基 ，新引擎已经公开了文件正文。

UI.body.events({
  'mouseup': function () {
    console.log("mouseup");
  }
});

谷歌小组中的这些主题将帮助您查明当前的任何问题领域以及如何解决这些问题的建议。

Answer 4

您可以使用onRendered和onDestroyed回调来注册帮助程序。

var mouseEvent = function (e) {
  console.log(e.clientX, e.clientY);
}

Templates.myTemplate.onRendered(function () {
  $(window).on('mousemove', mouseEvent);
});

Template.myTemplate.onDestroyed(function () {
  $(window).off('mousemove', mouseEvent);
});