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.11.3. If you need support for older versions of Ember, use the '1.8.1' branch.

1. Include cloaked.js and cloaked-collection.js in your Ember project's views directory.
2. To display a collection of cloaked items, use {{cloaked-collection}} in your handlebars templates like this:

  {{cloaked-collection itemViewClass="post" content=model.posts}}

itemViewClass is the name of the view to render in the collection. post would render PostView.

content is the collection of items to display.

Default: undefined (not controller will be used)

Name of the controller for items in collection.

Default: 100

Height of the cloaked views by default. You should pick a value that is in the ballpark of your average view height.

Default: "Loading..."

HTML you want to render while the cloaking is loading.

Default: false

Set to "true" if you want to use content.xyz in your views instead of the context.

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

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.

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.

Default: undefined

Current scroll position like native element.scrollTop (see iScroll support).

Default: undefined

Height of the "window" in which content is scrolling (see iScroll support).

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.

Default: 10

The amount of debouncing in ms that will be considered for cloaking. You probably don't have to change this value.

Demo

  {{cloaked-collection itemViewClass="item" content=model wrapperTopBinding="view.scrollTop" wrapperHeightBinding="view.height"}}

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

MIT