Ember is very slow at rendering lists

Performance
41

I tried using the group helper, but not sure it will work for my use case. I have a list of input elements (text fields, pick lists, etc). It seems the only way I can get the content to render in each input element is to always us ‘groupRows=true’. And even when it does render, it’s still very slow. Is this a known limitation of the {{group}} helper? Does it not help the efficiency of input elements?

It looked so promising so I want to make sure I’m not overlooking something obvious. Here is an example: http://jsbin.com/enapec/336/edit?html,css,js,console,output

42

So what is the right pattern for nested list views today? I notice with 3 levels of nested collection view, which create ~ 300 renderings, the screen is only painted once? Apparently at the end of rendering all of the subviews in serial, and it takes 3 seconds.

TopLevel.hbs (1 of these)

...
{{ view "MycollectionView" contentBinding="foos"}}
...

MycollectionViewItem.hbs (10-30 of these)

...
{{ view "AnotherCollectionView" contentBinding="content.bars"}}
...

AnotherCollectionViewItem.hbs (1-10 of these)

   ...
    {{#each "content.bazes"}}
       {{someProp}}
    {{/each}}
   ...

All of the arrays involved are Ember.A() and built up using pushObject. I’m really interested to find the pattern for achieving this which is actually performant enough to use.

Sure need those HTMLBars.

43

Careful @lennon_p, building up your array with pushObject will mean that you will be re-rendering as each option is added. You’re better off calling pushObjects (plural) once with all of your data so that it only fires off one re-render.

44

Could you please share idea how to do lazy loading with remote data.

45

The fact is unbounded result sets are bad architecture. If you’re not doing something like cloaking offscreen elements - regardless of the size of the total dataset then you’re not being a good citizen and you’re probably being lazy (instead of making your data lazy?)

Angular might be good at loading 2000 items into a list but then I’d say it’s also good at encouraging bad architecture.