2015-07-11 120 views
0

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

$烬版本

version: 1.13.1 
node: 0.12.6 
npm: 2.12.1 

为了证明我有以下HBS其插入检测成分:

{{test-component parentController=controller}} 

检测成分的以前版本.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函数在它初始化之前被初始化的。

当前烬

的版本为烬的当前版本我做了如下修改。 didInsertElement将自身组件捕获到变量_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') 
}); 

这是加载的应用期间occurrs警报的序列。

  1. feedLoadedChanged
  2. feedLoadedChanged和自我不initalized
  3. feedLoadedChanged
  4. feedLoadedChanged和自我initalizedtrue(这是原始的提醒)

所以我想知道如果这个初始化组件功能它之前的组件是自己的问题还是预期的行为?

+0

仅供参考我已经提出这个错误https://github.com/emberjs/ember.js/issues/11719。不过有人建议我使用新的组件生命周期钩子:http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html。解决这个问题。将很快提供正确答案 –

+0

组件挂钩看起来像是一种很好的方式来获得一些细粒度控制。 (虽然我自己不知道)。从你的例子中还要指出一些事情。不推荐'.observes',但是如果你真的需要一个观察者。手动设置观察员(仅略微)更好。例如在'init'内部hook this.addObserver()'。 'self.get('parentController')。get('feedLoaded')'等价于'self。get('parentController.feedLoaded')':)干杯 –

+0

谢谢乔尔。按照以下步骤执行你的建议:) –

回答

0

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

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

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