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/

Answer 2

I used a computed property to route to a model's property and store the last value upon its set.

registrationGroup: Em.computed('regionModel.registrationGroup', 
get:->
  @.get('regionModel.registrationGroup')
set:(key, value, oldValue)->
  @.set('lastRegistrationGroup', oldValue)
  @.set('regionModel.registrationGroup', value)
)

Answer 3

Take a look at beforeObservers. A beforeObserver fires before a property changes. So if you get the property in a beforeObserver, you will have the the pre-change value. You set up this type of observer using Ember.addBeforeObserver or via the observesBefore function prototype extension.

That would give you what you need to achieve your goal. I've created the following JSBin based on your fiddle to demonstrate this here: http://emberjs.jsbin.com/qewudu/2/edit

UPDATED on 2014-10-07 to reflect behavior in Ember 1.7.x.

UPDATE on 2015-02: beforeObserver has been deprecated. See other answers to this question.

Answer 4

beforeObserver has been deprecated in Ember 1.10.

Instead, use a manual cache:

doSomething: Ember.observer( 'foo', function() {
  var foo = this.get('foo');
  var oldFoo = this.get('_oldFoo');

  if (foo === oldFoo) { return; }

  // Do stuff here

  this.set('_oldFoo', foo);
})