Ember : Hook for css property change

Question

I have to render a lot of divs into DOM. So, what I did is I render the first 5 elements into the DOM first after that I render every 10 divs with 300ms interval period.

The problem is when I change into display: block I need to change something in the component. So, I try to use didRender hook for that.

Code is below

didRender() {
   if(this.element.offsetParent) {
      this.set('myvar', true);
   }
} 

But it's not working perfectly. Anyone please suggest me which is the best way to do this.

_Thanks in Advance.

Answer 1

It's hard to guess your use case from the question but I assume that it's about rendering a very large list of items without causing performance issues. The ember ecosystem provides bulletproofen addons to do so. The most established ones I'm aware of are ember-collection and ember-large-list. I would recommend to use one of these if they suit your requirements. Reimplementing something similar will be a lot of work. Rendering new items on a timeout basis would not scale well as it doesn't take workload of browser into account.

For your concrete question: Ember does not provide a way to listen to CSS changes. You should execute custom logic at the same place as in which you are mutating the property which triggers the CSS change. If it has to be run after render, you need to deal with Ember's runloop.