ember-collection
ember-collection copied to clipboard
items of different heights or dynamic heights
Without pre-rendering and measuring, is there support for items with heights which are not know before hand? If not, I tried a work-around where all items are the same height, but expandable. But is this supported since the height has to change dynamically? I tried the following for a expandable list item:
{{#ember-collection
items=model
cell-layout=(mixed-grid-layout dimensions) as |item index|
}}
Then, in Ember, i changed to height of one item via
this.get('dimensions').replace(index,1,[{width:1000, height:2000}]);
But ember-collection doesnt seem to observe the dimensions array. How can I support either of the above cases?
I have variable heights working. I built a custom layout which tracks both the height of each object and the cumulative height of everything before it. It implements a method called updateHeight
. I subclassed ember-collection
so that every 100ms it checks the heights of all ember-collection cells in the DOM and calls layout.updateHeight()
with the new values. This gets the job done however there is a glitchy moment where all the rows overlap while ember-collection is first checking the heights of the newly rendered rows.
I previously had a more complicated system where I rendered things off screen to check height before inserting them but ultimately it was more trouble than it was worth.