Ember 组件观察者属性答案

【问题标题】：Ember Components Observers attributeEmber 组件观察者属性
【发布时间】：2015-07-11 18:57:25
【问题描述】：

我已升级到最新版本的 ember。我注意到一个潜在的问题，即当一个组件函数观察到一个外部上下文属性时，它甚至在实际组件初始化之前就已经被初始化了。

$ember 版本

version: 1.13.1
node: 0.12.6
npm: 2.12.1

为了证明我有以下插入测试组件的 hb：

{{test-component parentController=controller}}

旧版 ember

测试组件.js

feedLoadedChanged: function(){
        var self = this;
        alert("feedLoadedChanged and self initialized" + self.get('parentController').get('feedLoaded'));
}.observes('parentController.feedLoaded'),

在之前的 ember 版本中，上述警报曾经成功运行。然而，在当前版本的 ember 中，self/this 变量引用的是 Window 对象而不是组件。

所以我认为这是因为 feedLoadedChanged 函数在它自己初始化的组件之前被初始化。

当前版本的 ember

对于当前版本的 ember，我进行了以下更改。 didInsertElement 将 self 组件捕获到变量 _self 中，并且仅当该变量存在时才调用原始警报函数。

下面的代码解决了这个问题：

export default Ember.Component.extend({
    didInsertElement: function(){
            var self = this;
            self.set('_self', this);
    },

    feedLoadedChanged: function(){
     var self = this.get('_self');
        alert('feedLoadedChanged');
     if(self){
        alert("feedLoadedChanged and self initalized" + self.get('parentController').get('feedLoaded'));
     } else {
        alert("feedLoadedChanged and self NOT initalized");
     }
}.observes('parentController.feedLoaded')
});

这是在应用程序加载期间发生的警报序列。

feedLoadedChanged
feedLoadedChanged 和自未初始化
feedLoadedChanged
feedLoadedChanged 和 self initalizedtrue（这是原始警报）

所以我想知道在组件本身之前初始化组件函数是否是一个问题或预期的行为？

【问题讨论】：

仅供参考，我已将此作为错误github.com/emberjs/ember.js/issues/11719 提出。然而，有人建议我使用新的组件生命周期挂钩：emberjs.com/blog/2015/06/12/ember-1-13-0-released.html。来解决问题。将尽快提供正确的答案
组件挂钩看起来是获得一些细粒度控制的好方法。（虽然我自己并不知道他们）。从您的示例中还需要指出几件事。 .observes 不推荐，但如果你真的需要观察者。手动设置观察者（仅稍微）更好。例如在init 内钩this.addObserver()。 self.get('parentController').get('feedLoaded') 也相当于 self.get('parentController.feedLoaded') :) 干杯
谢谢乔尔。按照以下实施您的建议:)
是的，这完全是一个错误
酷@ShivamSinha ！很高兴它有帮助。此外，将观察者的清单保存在单个挂钩中比使用 .observes 函数原型（例如 function () {}.observes() ）更好，因为它有助于保持一个易于阅读的您手动设置的观察者列表:) 因为观察者意外发射可能是一个痛点，很高兴提前知道观察者在哪里

标签： ember.js

【解决方案1】：

使用 didInsertElement 生命周期方法与 Joel 建议的手动 addObserver 相结合已解决了该问题。

export default Ember.Component.extend({
    didInsertElement: function(){
         this.addObserver('parentController.feedLoaded',this,'feedLoadedChanged');
    }

    feedLoadedChanged: function(){
     alert("feedLoadedChanged and self initalized"  + this.get('parentController.feedLoaded'));
    }
});

【讨论】：