4

我正在尝试将我的项目升级到 Ember 1.13，我对component的新属性的行为有点困惑，尤其是当我必须观察它们时。

例如，我的测试组件观察到bar是从外部传递的参数。我知道在 Ember 的新 Glimmer 引擎中，组件的任何属性更改后都会重新渲染。我想不通的是，如果我观察attrs.bar（我没有修改bar！），那时观察者也会被解雇。但如果我观察酒吧本身，那就没问题了。

示例代码：

HTML 栏：

 {{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

有谁知道为什么观察者被触发？

4

1 回答 1

1

好吧，您不必使用观察者，因为您在 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将无法正常工作，每当更新属性（包括 init）时，每次都会改变 attrs 从而导致观察者触发，更多请参阅此处。attrs应该与angle-bracket components. 这是一篇很好的文章，为什么我们不应该将 attrs 用于卷曲组件。

于 2016-07-18T08:43:04.357 回答