Ud3323によって提供される別の質問の解決策を参照してください: http://jsfiddle.net/ud3323/ykL69/ 。このソリューションは、赤い色を使用して変更された値を強調表示します。追加の要件があります。値が緑色のハイライトを増やした場合、赤色のハイライトを減らした場合。このためには、オブザーバーの古い値と新しい値を知る必要があります。これを行う方法はありますか?
P.S. Embersのドキュメントには、オブザーバー関数で利用できるものについては何も書かれていません。この例からわかるのは、オブザーバーがitemRowViewで定義されているため、「this」はitemRowViewを指しているということだけです。
beforeObserver
sを見てください。 beforeObserver
は、プロパティが変更される前に発生します。したがって、beforeObserverでプロパティをget
すると、変更前の値が得られます。このタイプのオブザーバーは、Ember.addBeforeObserver
を使用するか、observesBefore
関数プロトタイプ拡張を介して設定します。
それはあなたがあなたの目標を達成するために必要なものをあなたに与えるでしょう。ここでこれを示すために、あなたのフィドルに基づいて次のJSBinを作成しました: http://emberjs.jsbin.com/qewudu/2/edit
Ember 1.7.xの動作を反映するために、2014-10-07に更新されました。
2015-02の更新:beforeObserver
は非推奨になりました。この質問に対する他の回答を参照してください。
beforeObserver
は 非推奨 in Ember 1.10。
代わりに、手動キャッシュを使用してください。
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);
})
willInsertElement
を使用して初期値を保存し、値を変更したら、次の2つを比較します。
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/
計算されたプロパティを使用してモデルのプロパティにルーティングし、最後の値をそのセットに格納しました。
registrationGroup: Em.computed('regionModel.registrationGroup',
get:->
@.get('regionModel.registrationGroup')
set:(key, value, oldValue)->
@.set('lastRegistrationGroup', oldValue)
@.set('regionModel.registrationGroup', value)
)