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

在工作中,我们使用生命周期钩子来注册/取消注册Ember中未实现的事件.我们使用didInsertElement和willDestroyElement生命周期钩子将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).