Ember JS 中的滚动检测？

Question

在 Ember JS 中检测滚动的最佳方法是什么？没有内置的滚动动作，我可以使用 jquery 但不确定将它放在哪里？它会进入我的application.js，因为它有应用范围，还是其他地方？

实际滚动 detection/logic 在这里不是问题，而是如何以 Embery 方式设置这样的脚本。

理想情况下滚动是一个动作，可以在 application.js 文件中这样处理：

import Ember from 'ember';

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

Answer 1

在工作中，我们对 register/unregister 事件使用了生命周期挂钩，但 Ember 中未实现。我们使用 didInsertElement 和 willDestroyElement 生命周期挂钩将 bind/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)。

Answer 2

我最终使用了这个 awesome library、ember-perfectscroll。它包装了必要的模板，并提供了大量有用的 CSS classes/functions.

Ember JS 中的滚动检测？

Scroll Detection in Ember JS?

javascript

scroll

action

web-applications

ember.js