Ember-large-list NPM

ember-large-list

Want to render a large list of items in paginated groups, but Ember's DOM teardowns and setups are reducing performance, and "canonical" smoke-and-mirrors patterns (e.g. ember-collection) is causing memory-leak crashes?

This addon is for you.

Installation

ember install ember-large-list

It's also up to you to provide the compute template helper.

This repo just sorta assumes you have it. (see how to implement)

Usage

<ul>
  {{#large-list items=data startIndex=0 perPage=5 as |item globalIndex localIndex|}}
    {{my-row-presentation data=item}}
    {{!-- globalIndex goes from 0 to (data.length - 1) --}}
    {{!-- localIndex goes from 0 to (perPage - 1) --}}
  {{/large-list}}
</ul>

note: you can also use offset and limit instead of startIndex and perPage; they are aliased

How does it work?

Very simple, instead of using each, we use n.times. Consider the following pseudo-code in ruby:

paged_list = items.slice(start_index).take(per_page)
per_page.times do |i|
  yield paged_list[i]
end

We can translate this idea over to hbs and javascript like so:

large-list/component.js

Component.extend({
  startIndex: 0,
  perPage: 5,
  items: [
    { name: 'God of War', icon: 'images/god-of-war.png' },
    // ...
  ]
});

large-list/template.hbs

{{#let (take items startIndex perPage) as |smallArray|}}
  {{#n-times perPage do |index|}}
    {{my-row-presentation data=(get smallArray index)}}
  {{/n-times}}
{{/let}}

And that's it! Instead of depending on each to iterate through out array, we use generic helpers let, take, and n-times and suddenly, we guarantee ourselves the following: