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