Ember JS中如何检测滚动？

Question

在Ember JS中，最好的检测滚动的方法是什么？它没有内置的滚动事件，可以使用jQuery，但不确定应该放在哪里？应该放在application.js中因为它具有应用程序作用域，还是其他地方？

实际的滚动检测/逻辑并不是问题所在，而是如何以Ember的方式设置此类脚本。

理想情况下，滚动应该是一个action，并且可以在application.js文件中处理：

import Ember from 'ember';

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

- David Ferris

---

看看这个答案和它的twiddle。已经解释了resize，你可以用scroll替换它... - Ember Freak

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)。

- n1ru4l

Answer 2

我最终使用了这个很棒的库，ember-perfectscroll。它包装了必要的模板，并提供了大量有用的CSS类/函数。

- David Ferris