Ember js 2.0 passing computed property from controller to component

Question

I am using Ember 2.3.

Like the title says I am trying to pass a computed property from my controller to my component. I don't know what I am doing incorrectly but it is not working for me. This is what I am doing:

In my controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  someProperty: 'someValue',

  myComputedProperty: Ember.computed('someProperty', function(){
    return {property: this.get('someProperty')};
  })

});

My component:

export default Ember.Component.extend({
   myProperty: {}
});

In my template:

{{my-component myProperty=myComputedProperty}}

What I am seeing is that my myProperty in my-component is always set to {}. It never gets the value I hand in the template. Note I've also tried just defining a property as a string literal on my controller and handing that in and it is not recognized either. Also of note is that I did originally try defining the computed property in my route but I found the only way I could access it was if it was defined in the model hook itself, like:

model(params) {
   return {
   myComputedProperty: Ember.computed()...........
  };
}

But this wasn't working for me because I needed values from the controller that were not available when the model hook was called.

I don't know what I am doing wrong here. I'm sure it's something simple, but I am running out of ideas. Could anyone tell me what I am doing wrong here? Is passing a computed property from a controller to a component bad practice in any way? Any advice would be appreciated. Thanks much!

Patrick Berkeley Patrick Berkeley · Accepted Answer · 2016-02-01T23:34:58

Passing computed properties into a component from a controller is fine.

The code you have should be working. The one question/change is: Do you need to be returning a nested object in you controller's computed property? {property: this.get('someProperty')}`

If so, then you need to call .property on it in your component in order to access the controller's someProperty value.

my-component/template.hbs

{{myProperty.property}}

Here's an ember-twiddle demonstrating the code working.

Ember js 2.0 passing computed property from controller to component

1 Answers