Question

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

$ ember version

version: 1.13.1
node: 0.12.6
npm: 2.12.1

为了演示我有以下hbs插入测试组件：

{{test-component parentController=controller}}

以前版本的ember

测试component.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，我做了以下更改。 didInsertElement将self组件捕获到变量_self中，只有在该变量存在时才调用原始alert函数。

以下代码解决了问题：

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 and self not initalized
feedLoadedChanged
feedLoadedChanged和self initalizedtrue（这是原始警报）

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

Answer 1

使用didInsertElement生命周期方法结合手动addObserver按照Joel的建议解决了这个问题。

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

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

Ember Components Observers属性

1 个答案: