javascript - Scroll Detection in Ember JS? - Stack Overflow

admin管理员组

文章数量:1357382

What's the best way to detect scrolling in Ember JS? There is no built in scroll action, and I can use jquery but not sure where to place it? Would it go in my application.js because it has application scope, or elsewhere?

The actual scroll detection/logic is not an issue here, but rather how to set up scripts like this in an Embery way.

Ideally scrolling would be an action, and could be handled as such in the application.js file:

import Ember from 'ember';

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

What's the best way to detect scrolling in Ember JS? There is no built in scroll action, and I can use jquery but not sure where to place it? Would it go in my application.js because it has application scope, or elsewhere?

The actual scroll detection/logic is not an issue here, but rather how to set up scripts like this in an Embery way.

Ideally scrolling would be an action, and could be handled as such in the application.js file:

import Ember from 'ember';

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

• javascript
• ember.js
• web-applications
• scroll
• action

Share Improve this question Follow asked Sep 20, 2016 at 14:13 David FerrisDavid Ferris 2,35577 gold badges3434 silver badges6060 bronze badges 1

• Have a look at this answer and it's twiddle . that has been explained for resize you can replace it with scroll ... – Ember Freak Commented Sep 20, 2016 at 15:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

At work we used the lifecycle hooks to register/unregister event that are not implemented in Ember. We used the didInsertElement and willDestroyElement lifecycle hooks to bind/unbind jQuery events to a specific namespace (often the ponents ID): https://guides.emberjs./v2.8.0/ponents/the-ponent-lifecycle/

Code example:

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 ponent
    },

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

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

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

})

An alternative way could be a service which extends Ember.Evented. IN that service you could also register a jQuery Event listener. The ponents which need to listen to the scroll event could subscribe to the service (http://emberjs./api/classes/Ember.Evented.html).

I ended up using this awesome library, ember-perfectscroll. It wraps the necessary templates, and provides a ton of useful CSS classes/functions.

本文标签： javascriptScroll Detection in Ember JSStack Overflow