Несвязанные ключевые события в Метеор?

Question

У меня есть шаблон, который имеет ключевое событие

Template.layout.events({ 
    'keyup': function (e, template) { 
    if (e.keyCode === 13) { 
     e.preventDefault(); 
     // do some stuff here, isn't important for question 
     Router.go('Users.profile', { _id: id }); 
    } 
    } 
}); 

Однако при изменении страниц, кажется, событие все еще связан с кнопкой ввода.

Я предполагаю, что первым шагом будет использование обратного вызова onDestroyed для моего шаблона.

Template.layout.onDestroyed(function() { 
    // ??? 
}); 

Как бы вы отменили ключевые события на смену страницы в метеоре?

Answer 1

Это не похоже, что Meteor изначально поддерживает удаление событий, добавленных через Template.name.events. Есть несколько резолюций, которые я могу придумать в этом случае:

1. Обращайтесь к специальному футляру внутри обработчика события, что означает связывание обработчика с остальной частью прикладной логики. Это может или не подходит вашим потребностям.
2. Прикрепление обработчика события (именного) .onRendered с использованием jQuery и последующего его удаления .onDestroyed.
3. Привязать событие keyup ближе к элементу в фокусе. Если этот элемент удален из DOM, обработчик также будет удален.

Answer 2

Обработчики событий уничтожаются автоматически при уничтожении шаблона. Но, с таким именем, как layout, я предполагаю, что шаблон существует на нескольких маршрутах. Если это так, добавьте console.log в onDestroyed() и убедитесь, что он даже уничтожен, когда вы этого хотите. Чтобы это исправить, прикрепить keyup слушателя на более конкретном шаблоне, например, если у вас есть этот

<template name="layout"> 
    {{>settingsMenu}} 
</template> 

и если вы хотите только «Enter» делать что-то сделать на меню настройки, использования: Template.settingsMenu.events Тогда, когда settingsMenu уничтожен, так же как и обработчик событий. Если вы причудливо не один (т.е. текущий маршрут не имеет один уникальный шаблон на нем), создать:

<template name="settingsMenu"> 
</template> 

{{>settingsMenu}} 

Template.settingsMenu.events({... 

Кроме того, уродливое исправление было бы добавить условный в верхнем вашего мероприятия: if (Router.current().route.getName() === 'settingsMenu')... Я называю это уродливым, потому что у вас все еще есть прослушиватель событий изгоев, он просто безвреден для всех, кроме вашего указанного маршрута.