观察者如何找出 Ember.js 中被观察属性的前后值？

Question

请查看 ud3323 提供的另一个问题的解决方案：http://jsfiddle.net/ud3323/ykL69/。此解决方案使用红色突出显示更改的值。我还有一个额外的要求：如果该值增加了绿色高光，如果它减少了红色高光。为此，我需要了解观察者的旧值和新值。有没有办法做到这一点？

附： Embers 文档没有说明观察者函数中可用的内容。从这个例子我可以看出，由于观察者是在 itemRowView 中定义的，“this”指向 itemRowView。

Answer 1

我使用计算属性路由到模型的属性并将最后一个值存储在其集合中。

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

Answer 2

beforeObserver 在 Ember 1.10 中一直是 deprecated。

改为使用手动缓存：

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);
})

Answer 3

看看beforeObservers。 beforeObserver 在属性更改之前触发。因此，如果您在 beforeObserver 中 get 属性，您将拥有更改前的值。您可以使用Ember.addBeforeObserver 或通过observesBefore 函数原型扩展来设置这种类型的观察者。

这将为您提供实现目标所需的一切。我根据您的小提琴创建了以下 JSBin 以在此处进行演示：http://emberjs.jsbin.com/qewudu/2/edit

于 2014 年 10 月 7 日更新以反映 Ember 1.7.x 中的行为。

2015 年 2 月更新：beforeObserver 已被弃用。查看此问题的其他答案。

Answer 4

使用willInsertElement存储初始值，当值改变时，比较两者：

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')
});

看看jsfiddle http://jsfiddle.net/ykL69/15/