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：观察组件的传入属性的正确方法？

回答

相关问题