觀察者如何才能找出Ember.js中被觀察屬性的前後值？

請參閱由ud3323提供的另一個問題的解決方案：http://jsfiddle.net/ud3323/ykL69/。該解決方案使用紅色突出顯示更改的值。我有一個額外的要求：如果值增加了綠色的高光，如果它減少了紅色的高光。爲此，我需要了解觀察者的新舊價值觀。有沒有辦法做到這一點？觀察者如何才能找出Ember.js中被觀察屬性的前後值？

P.S.餘燼文檔沒有說明觀察者函數中可用的內容。我從例子中可以看出，由於觀察者是在itemRowView中定義的，「this」指向itemRowView。

來源

2012-02-10 Naresh

看看beforeObserver秒。 A beforeObserver在物業更改前發生火災。因此，如果您在beforeObserver中的屬性爲get，那麼您將擁有預先更改的值。您使用Ember.addBeforeObserver或通過observesBefore函數原型擴展來設置此類型的觀察者。

這會給你你需要什麼來實現你的目標。我已經創建了以下JSBin基於您的小提琴來演示此處：http://emberjs.jsbin.com/qewudu/2/edit

更新於2014-10-07以反映Ember 1.7.x中的行爲。

2015-02更新：beforeObserver已被棄用。請參閱此問題的其他解答。

來源

2012-02-11 03:06:32

Ember.addBeforeObserver更清潔。謝謝盧克！ – Naresh 2012-02-11 06:18:06

+11

順便說一句，我最近注意到有一個'observesBefore'函數的擴展，所以代碼可以做得更好，因爲在http://jsfiddle.net/ye3M2/ – 2012-02-14 21:24:58

我不相信'價值'正在提供。我正在版本1.5.1中測試 – Denzo 2014-05-21 01:18:48

使用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/

來源

2012-02-10 21:49:36

謝謝扎克。這很好。但是，如果我的理解是正確的，則此代碼中有一個錯誤。看起來，willInsertElement（）僅被調用一次（最初插入元素時）。因此，爲了保持顏色正確顯示，在valueDidChange（）的末尾，您必須將initialValue重新初始化爲新值 - 從而確保將下一個更改與此值進行比較。雖然這種方法總體上起作用，但該觀點現在正成爲緩衝價值的地方。相反，如果觀察者可以提供舊的和新的價值，代碼可以更簡單。 – Naresh 2012-02-11 00:49:45

更正了我的答案。正如@Luke所說，它看起來像beforeObserver可以達到同樣的結果。 – 2012-02-11 05:36:50

我同意。謝謝。 – Naresh 2012-02-11 06:18:33

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

來源

2015-02-21 01:02:16

這個觀察者如何知道何時在沒有任何屬性的情況下被觸發？我嘗試了一些與.observes（'foo'）類似的東西，並且foo值已經在觀察者函數內部改變了。 – 2015-09-09 16:43:14

Thx，我用依賴關鍵碼更新了我的答案。是的，相關的值在觀察者中是新的。您將它與以前的值進行比較，如果它不同於您知道值已更改。 – 2015-09-09 16:45:54

好的，我明白了，謝謝澄清和更新。在我的情況下，如果新值未定義，我實際上是使用舊值來設置新值，所以使用setter是最好的，因爲那樣我就不需要隱藏值了。但是我發現這在很多情況下都很有效。 – 2015-09-09 20:01:31

我用了一個計算的屬性路由到一個模型的屬性，並存儲在其設定的最後一個值。

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

來源

2015-09-09 16:45:21

CoffeeScript中的@ @後不需要點。例如， '@get（）'。 – 2015-09-09 16:47:05

另外，你爲什麼使用getter？你是否保護不重寫？ – 2015-09-09 16:47:49

我在CS中使用點，因爲我發現用它們搜索某些調用比較容易，而且我還發現它提高了可讀性。 Getter只是爲了保持一致性，所以我可以使用相同的屬性來獲取和設置。 – 2015-09-09 19:57:30

觀察者如何才能找出Ember.js中被觀察屬性的前後值？

回答

相關問題