Ember.js 1.13：观察组件传入属性的正确方法？答案

【问题标题】：Ember.js 1.13: The right way to observe a passed-in attribute of component?Ember.js 1.13：观察组件传入属性的正确方法？
【发布时间】：2015-08-13 04:30:12
【问题描述】：

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

例如，我的测试组件观察到 bar 是从外部传递的参数。我知道在 Ember 的新 Glimmer 引擎中，组件的任何属性更改后都会重新渲染。我想不通的是，如果我观察 attrs.bar（我没有修改 bar！），那个时候观察者也会被解雇。但如果我观察 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

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

【问题讨论】：

你的 jsbin 似乎对我不起作用，但我移植到 twiddle 以更好地理解你的问题：ember-twiddle.com/acb8cbf30c7dbbd0a4b2

标签： ember.js ember-components ember-observable

【解决方案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，这会导致观察者触发，更多信息请参阅here。 attrs 应该与angle-bracket components 一起使用。这是一个很好的 article 为什么我们不应该将 attrs 用于卷曲组件。

【讨论】：