Constructor
new ScrollEndEventEmitter()
#
Class to assist a view in implementing infinite scrolling on some DOM element. This module itself is only responsible for emitting an Event when the bottom of an Element is scrolled to.
Example
<code>
var
ScrollEndEventEmitter = require( './ScrollEndEventEmitter' ),
eventBus = require( './eventBusSingleton' );
class PhotoList extends View {
//...
initialize: function ( options ) {
this.gateway = new PhotoListGateway( {
username: options.username
} );
// 1. Set up infinite scroll helper and listen to events
this.scrollEndEventEmitter = new ScrollEndEventEmitter( eventBus, 1000 );
this.scrollEndEventEmitter.on( ScrollEndEventEmitter.EVENT_SCROLL_END,
this._loadPhotos.bind( this ) );
super.initialize( options );
},
preRender: function () {
// 2. Disable until we've got the list rendered and set DOM el
this.scrollEndEventEmitter.setElement( this.$el );
this.scrollEndEventEmitter.disable();
},
_loadPhotos: function () {
this.gateway.getPhotos().then( ( photos ) => {
// load photos into the DOM ...
// 3. and (re-)enable infinite scrolling
this.scrollEndEventEmitter.enable();
} );
}
}
</code>- Mixes in:
- Source:
Fires:
Class to assist a view in implementing infinite scrolling on some DOM element.
Methods
disable()
#
Disable the ScrollEndEventEmitter so that it doesn't trigger events.
Disable the ScrollEndEventEmitter so that it doesn't trigger events.
enable()
#
Enable the ScrollEndEventEmitter so that it triggers events.
Enable the ScrollEndEventEmitter so that it triggers events.
setElement($el)
#
Set the element to compare to scroll position to
Parameters:
| Name | Type | Description |
|---|---|---|
$el |
jQuery.Object | jQuery element where we want to listen for scroll end. |
Set the element to compare to scroll position to
Events
ScrollEndEventEmitter-scrollEnd()
#
Fired when scroll bottom has been reached.
Fired when scroll bottom has been reached.