流星JS:我应该如何将事件绑定到流星的窗口

Question

我正在尝试在流星窗口外检测鼠标。我尝试过，但是window似乎不起作用：

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

我应该如何将事件绑定到流星的窗口？

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所述，新的UI引擎仅在将模板插入DOM时一次调用onRendered一次。如果您的事件处理程序与DOM相互作用，这使其比onCreated更好。

Answer 2

这不是典型的流星用例，流星没有为这种行为提供任何特殊的帮助者（至少目前此时此刻）。因此，请使用典型的jQuery解决方案。只需确保它包裹在Meteor.startup()中。

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

Answer 3

流星几乎为1.0，将运送新的UI引擎。根据流星Wiki的说法，新引擎已经暴露了事件的文档主体。

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

Google组中的这些线程将帮助您查明当前的问题领域以及有关如何解决它们的建议。

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