Ember.js rendering large lists without locking up the browser

Question

When it comes to rendering a large list of items on the client-side, what are my options with Ember.js? Pagination comes to mind as an obvious way to decrease the rendering time, but are there any other tricks that allow you to render a big list of items without that noticeable browser freeze as the javascript executes?

Answer 1

ember-list-view for lists

ember-table for tables

I tried a million different ways of rendering lists and templates without these to no avail, so hopefully this helps someone.

Answer 2

I found a similar performance issue when rendering large lists.

My use cases is to render log entries. I ended up using jQuery and writing directly to the DOM.

Here's a post on how I did it and here's the code.

To cut a long story short, I get 50 records and render them on the screen. At the bottom of the screen, I have a Show More button. If the user clicks this, I append the next 50 of the bottom of the list.

Note that my records are read only. If I had to perform CRUD operations, I would revert to using collections with paging. Collections provide binding support so when the user edits a record, the fields in the list will automatically get updated. Here's the post on CRUD operations.

My code is still using Sproutcore 2 before it was renamed to EmberJS. I think you will find most of the API are the same - just the namespace needs changing.

Hope this helps.