Meteor JS: How should I bind events to the window in Meteor?

Question

I am trying to detect a mouseup outside of a window in Meteor. I tried this, but `window` doesn't seem to work: ``` Template.layout.events({ 'mouseup window' : function(e) { console.log("mouseup"); } }); ``` How should I bind events to the window in Meteor?

Accepted Answer

The code snippet below will bind the event handler when your template is created and unbind when your template is destroyed. Should give you the behavior you're looking for.

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

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

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

Note that the event is bound in the `onCreated` handler, so there's a chance the template will not have been rendered yet when the event fires. If your handler interacts with the DOM, you will need to check for that. It is not bound in the `onRendered` handler because that would cause your `mouseup` handler to be bound multiple times if the template were re-rendered.

Edit: As Serkan mentions below, the new UI engine only calls `onRendered` once when the template is inserted into the DOM. This makes it a better choice than `onCreated` if your event handler will interact with the DOM.

Meteor JS: How should I bind events to the window in Meteor?

Solution

Problem

Related problems