Support for not rendering offscreen views in an Ember app for performance and lowered memory usage.
Extracted from Discourse's infinite scrolling.
The latest version has been upgraded to work with Ember 1.8.1. If you need support for older versions of Ember, use the '1.7.1' branch.
- Include
ember-cloaking.jsin your project. - To display a collection of cloaked items, use
{{cloaked-collection}}in your handlebars templates like this:
itemViewClass is the name of the view to render in the collection. post would render PostView.
content is the collection of items to display.
###Optional parameters
####itemController
Default: undefined (not controller will be used)
Name of the controller for items in collection.
####defaultHeight
Default: 100
Height of the cloaked views by default. You should pick a value that is in the ballpark of your average view height.
####loadingHTML
Default: "Loading..."
HTML you want to render while the cloaking is loading.
####preservesContext
Default: false
Set to "true" if you want to use content.xyz in your views instead of the context.
####idProperty
Default: undefined
Name of item's property to generate cloaked view DOM id. If set id will be generated using itemViewClass like so: {{itemViewClass}}-cloak-{{item.idProperty}}. Check out demo
####offsetFixedTop
Default: undefined
jQuery selector that will be used to offset the top of what is considered onscreen. Discourse uses this for example because we have a position: fixed; top: 0 header that is on top of content.
####offsetFixedBottom
Default: undefined
jQuery selector that will be used to offset the bottom of what is considered onscreen. Discourse uses this for example because we have a position: fixed; bottom: 0 composer that is on top of content.
####wrapperTop
Default: undefined
Current scroll position like native element.scrollTop (see iScroll support).
####wrapperHeight
Default: undefined
Height of the "window" in which content is scrolling (see iScroll support).
###uncloakDefault
Default: false
Whether or not to uncloak views by default when created. This is useful for sites like Discourse that perform infinite scrolling upwards, and depend on inserting elements above the top fold.
###scrollDebounce Default: 10
The amount of debouncing in ms that will be considered for cloaking. You probably don't have to change this value.
wrapperTop is the current scroll position like native element.scrollTop
wrapperHeight is the height of the "window" in which content scrolling
You can add the following methods to the controller that contains the {{cloaked-collection}} to be notified when elements are onscreen:
bottomVisibleChanged: Called when the bottomost visible element changes
topVisibleChanged: Called when the topmost visible element changes