Обнаружение прокрутки в Ember JS?

Question

Каков наилучший способ обнаружения прокрутки в Ember JS? Нет встроенного действия прокрутки, и я могу использовать jquery, но не знаю, где его разместить? Пойдет ли это в моем application.js, потому что у него есть область применения или где-то еще?

Фактическое определение/логика прокрутки здесь не проблема, а как настроить сценарии, подобные этому способом Embery.

В идеале прокрутка бы действие, и может быть обработан как таковы в application.js файла:

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    actions: { 
     onScroll: function() { 
      alert('scrolled'); 
     } 
    } 
}); 

Answer 1

Я закончил с использованием этого awesome library, ember-perfectscroll. Он обертывает необходимые шаблоны и предоставляет массу полезных классов/функций CSS.

Answer 2

На работе мы использовали жизненный цикл крючки для регистрации/незарегистрированного события, которые не реализованы в Эмбере. Мы использовали didInsertElement и willDestroyElement жизненный цикл крючки для связывания/UNBIND события Jquery к определенному пространству имен (часто компоненты ID): https://guides.emberjs.com/v2.8.0/components/the-component-lifecycle/

Пример кода:

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    didInsertElement() { 
    this._super(...arguments) 

    // Register your events here 
    Ember.$(document).on('scroll.my-namespace', 'body', this.eventHandler) 
    // this.$ if the element is located inside the component 
    }, 

    willDestroyElement() { 
    this._super(...arguments) 

    Ember.$(document).off('scroll.my-namespace') 
    // this.$ if the element is located inside the component 
    }, 

    eventHandler(ev) { 
     //Do sth with event 
    } 

}) 

Альтернативный способ может быть который расширяет Ember.Evented. В этой службе вы также можете зарегистрировать прослушиватель событий jQuery. Компоненты, которые должны прослушивать событие прокрутки, могут подписаться на услугу (http://emberjs.com/api/classes/Ember.Evented.html).