How to apply 'Blink' feature in Ember Table?

Question

in Ember Table, I need to change style of a cell with the change of particular cell content. I need to add color to cell with value update (that I have already done) and remove styles after 1 second (that I want to do).

I have called setTimeout when applying color and removed color within setTimeout. It does not work all the time. some cell colors are not removed. (this gets worse when scrolling). I assume after 1 second, Ember cannot find the particular cell element.

I use and Ember table component and assigned a contentBinding and columnBinding. I added a template for the Ember.Table.TableCell component and added class names.

Added Main Function and modified Jsbin example below.

Answer 1

I can't guarantee that this will answer your question, but here are a bunch of things that jump out at me when reading this code. I think they are best formatted as an "answer".

1. You should avoid side-effects, like calling setTimeout, within a computed property. Computed properties in Ember are lazy, so they only update when their value is needed. Consider using an Observer, or just a function, in cases like this. This is almost certainly related to your problem.

2. Instead of setTimeout, use Ember.run.later or similar Ember functions. This will make sure your code respects the Ember run loop.

3. Your customColor computed property doesn't depend on previousColumnValue, even though it uses it. This is related to the side-effects discussion: you should try to re-architect your code if possible.

Other than that, you have a lot of the right ideas. I'm fairly sure this can be done with Ember Table - the AJAX example is an example of Ember Table cells dealing with asynchrony.

I recommend debugging by first trying to create a minimal example in JS Bin, using the Ember Table starter kit. This will also be useful if you'd like more help - it makes it easy for people like me to play with your setup until it works.