ember-chunk-render-each

This addon provides a single component(chunk-render-each) useful for rendering long lists of data without locking up the browser. It does not use occlusion culling or any type of derendering gimmicks. It simply breaks up the list into sub arrays and renders them one sub array per run loop.

Usage

Installation

ember install @kysmith/ember-chunk-render-each

Rather than using the traditional each helper use the chunk-render-each component as a drop in replacement:

<ul>
  {{#chunk-render-each
    elementsToRender=elements
    as |element|
  }}
    <li>{{element.text}}</li>
  {{/chunk-render-each}}
</ul>

The component interface is detailed below as typescript interfaces

interface RenderCallback {
  (): any;
}

interface ChunkRenderEach {
  elementsToRender = any[];
  renderChunkSize? = number;
  onRenderStart? = RenderCallback;
  onRenderEnd? = RenderCallback;
}

Contributing

Installation

• git clone <repository-url> this repository
• cd ember-chunk-render-each
• npm install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.