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?
7
-
2I'm having slow loading performance with 850 items. And im running more than average hardware running chrome. I expected it to be fast.Stephan– Stephan2012-01-31 09:50:25 +00:00Commented Jan 31, 2012 at 9:50
-
2I've updated my ember.js from github and now speed as incresed A LOT, mine where like 6 months old or something. And a lot has hapened meanwhile.Stephan– Stephan2012-01-31 12:03:01 +00:00Commented Jan 31, 2012 at 12:03
-
Locking up of the browser is mainly caused by the rendering.Stephan– Stephan2012-02-01 11:49:33 +00:00Commented Feb 1, 2012 at 11:49
-
@Stephan, thanks for the pointer. Going even from just 0.9.5 => 0.9.6 had a noticeable performance boost.mkoistinen– mkoistinen2012-04-17 14:50:38 +00:00Commented Apr 17, 2012 at 14:50
-
1Check out github.com/emberjs/list-viewChristopher Manning– Christopher Manning2013-03-18 19:02:08 +00:00Commented Mar 18, 2013 at 19:02
|
Show 2 more comments
2 Answers
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.
Comments
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.
