Question

I am using Ember.js to create a table from a json feed. I have a requirement to flash the values (within a table row) that are changing. How do I do this in Ember.js?

My template is shown below:

<tbody>
    {{#each Quotes.quotesController.content}}
        <tr>
            <td class="quote-name">{{name}}</a>
            <td class="quote-code">{{code}}</a>
            <td class="quote-value">{{value}}</a>
            <td class="quote-bid">{{bid}}</a>
            <td class="quote-offer">{{offer}}</a>
        </tr>
    {{/each}}
</tbody>

Here’s the code that fetches and updates the quotes:

fetchQuotes: function() {
    var scope = this;
    $.getJSON('/rest/quotes', function(data) {
        $.each(data, function(index, quote) {
            scope.updateQuote(quote);
        });
    });
}

Just as a comparison, in backbone.js, I was binding to change events at the attribute level and firing animations in the callbacks. For example:

this.model.bind('change:value', this.updateValue);

updateValue: function() {
    var td = $(this.el).children('.quote-value');
    td.html(this.model.get('value'));
    td.animate({color: animationColor}, 200)
      .animate({color: '#000000'}, 3800, 'easeInQuint');
},

I don’t know if such an approach is possible/recommended using Ember.js.

Edit:
I almost have it now. I can handle an event on a table cell and change its color to anything. See this jsfiddle – click of any cell in the value column and it will turn red. The only thing I don’t know is how to capture a change to the table cell value instead of a click event. Is there any such thing as a change event that I can capture?

Answer 1

See the following jsFiddle (a modification of an answer another one of your questions). I think from there you can do what you need, but in short you need to make an observer that watches for changes to the property on your controller that is holding the array that you are modifying.

Edit in response to the 1st comment:

Here is a working solution in response to that comment: http://jsfiddle.net/ud3323/ykL69/