Ember.js 1.13：觀察組件的傳入屬性的正確方法？

我試圖將我的項目升級到Ember 1.13，並且我對atodrs的組件的行爲有些困惑，特別是當我必須觀察它們時。Ember.js 1.13：觀察組件的傳入屬性的正確方法？

例如，我的測試組件觀察bar這是從外部傳遞的參數。我知道在Ember的新Glimmer引擎中，一旦它的任何屬性發生變化，組件都會重新渲染。我無法弄清楚的是，如果我觀察到attrs.bar（我沒有修改酒吧！），那麼觀察員也將被解僱。但如果我觀察吧本身，那麼它會沒事的。

示例代碼：

HTMLBar：

{{test-cpnt foo=foo bar=bar}} 
<input type="button" {{action 'tap'}} value="tap"/>

控制器：

foo: 1, 
bar: 100, 
actions: { 
    tap: function(){ 
    this.set('foo', this.get('foo')+1); 
    } 
}

組件：

App.TestCpntComponent = Ember.Component.extend({ 
    barObv1: Ember.observer('bar', function(){ 
    console.log('bar observer is fired!'); 
    }), 

    barObv2: Ember.observer('attrs.bar', function(){ 
    console.log('attrs.bar observer is fired!'); 
    }), 
});

通過敲擊按鈕改變FOO的值，我們也會觸發barObv2。我已經創建了演示jsbin： https://jsbin.com/qiwivu/2/edit?js,console,output

有誰知道爲什麼觀察者被觸發？

來源

2015-08-13 starshine wang

您的jsbin似乎不適用於我，但我正在移植以便更好地理解您的問題： https://ember-twiddle.com/acb8cbf30c7dbbd0a4b2 –

那麼，您不必使用觀察者，因爲您在Ember 1.13中，您可以使用didUpdateAttrs，每當更新屬性時都會觸發它。

Ember.Component.extend({ 
.... 
didUpdateAttrs({oldAttrs, newAttrs}) { 
    let oldBar = get(oldAttrs, 'bar.value'); 
    let newBar = get(newAttrs, 'bar.value'); 

    if (oldBar !== new Bar) { 
     // your logic here 
    } 
} 
.... 
});

如果您打算使用觀察者，你可以觀察到的變化像下面

barDidChange: Ember.observer('bar', function(){ 
console.log('bar observer is fired!'); 
});

監聽attrs.bar將無法正常工作，每當一個屬性進行更新（包括初始化），ATTRS突變每次都會導致觀察員觸發，更多請參閱here。 attrs應該與angle-bracket components一起使用。這是一個不錯的article爲什麼我們不應該使用attrs捲曲組件。

來源

2016-07-18 08:43:04

Ember.js 1.13：觀察組件的傳入屬性的正確方法？

回答

相關問題