CODEWITHSUNDEEP
ember.js
Shivam Sinha
Shivam Sinha

Reputation: 5150

Ember Components Observers attribute

I have upgraded to the latest version of ember. I noticed a potential issue that when a component function which observes an outercontext attribute it is actually initialized even before the actual component is initialized.

$ember version

version: 1.13.1
node: 0.12.6
npm: 2.12.1

To demonstrate I have the following hbs which inserts the test-component:

{{test-component parentController=controller}}

Previous version of ember

test-component.js

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

In the previous versions of ember the above alert used to work successfully. However in the current version of ember the self/this variable referred to the Window object and NOT the component.

So I thought this was due the feedLoadedChanged function being initialized before the component it self was initialized.

Current version of ember

For the current version of ember I made the following changes. The didInsertElement captures the self component into the variable _self and the original alert function is only called if that variable exist.

The code below fixes the issue:

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')
});

This is the sequence of alerts which occurrs during application loaded.

  1. feedLoadedChanged
  2. feedLoadedChanged and self NOT initalized
  3. feedLoadedChanged
  4. feedLoadedChanged and self initalizedtrue (this is the original alert)

So I am wondering if this initialization of the component function before the component it self is an issue or expected behaviour ?

Upvotes: 0

Views: 980

Answers (1)

Shivam Sinha
Shivam Sinha

Reputation: 5150

Used the didInsertElement lifecycle method combined with the manual addObserver as suggested by Joel has resolve the issue.

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

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

Upvotes: 0

Related Questions