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.