How can an observer find out the before and after values of the observed property in Ember.js?

Question

Please see the solution to another question provided by ud3323: http://jsfiddle.net/ud3323/ykL69/. This solution highlights the changed value using the red color. I have an

Answer 1

Use willInsertElement to store the initial value, and upon change of the value, compare the two:

Quotes.itemRowView = Ember.View.extend({
    tagName: 'tr',

    initialValue: null,

    willInsertElement: function(){
        var value = this.get('content').value;
        this.set('initialValue', value); 
    },

    valueDidChange: function() {
        // only run if updating a value already in the DOM
        if(this.get('state') === 'inDOM') {
            var new_value = this.get('content').value;
            // decreased or increased?
            var color =  (new_value > this.get('initialValue') ) ?
                'green' : 'red' ;
            // store the new value
            this.set('initialValue', new_value);
            // only update the value element color
            Ember.$(this.get('element')).find('.quote-value').css('color', color);
        }
    }.observes('content.value')
});

Take a look at the jsfiddle http://jsfiddle.net/ykL69/15/