ember.js - Can an Ember component observe a controller property?

Question

I have a controller and a component. when the component is rendered, it is passed on in this manner:

{{modal-filter feature=feature parentController=this.controller}}

where feature is a param passed in via controller to handlebars, and parentController is the controller.

Now, in the controller itself, there is an property (an array). let's call that array requiredValues.

Now within a controller/component itself, we can easily set:

valueObserver : function(){
     ...
}.observes('requiredValues')

However, I need to observe this controller property from a the modal-filter component. So in the modal-filter component, what would I put as the observer function:

valueObserver : function(){
     ...
}.observes(???)

Answer 1

Passing an entire controller to a component is a massive code smell. It violates the basic principle of component encapsulation. If the "component" is so tightly coupled to the controller, then it's a view, from where you can access the controller by simply saying this.controller. Input to components should be strictly through parameters passed in when they are invoked. Output from components is through send, which the controller can map to some behavior of its choosing in its view's template by saying {{my-component action='eraseHardDisk'}}.

You don't need to directly observe anything on the controller from within the component. If you call the component with {{my-component param=someProperty}}, then any change to the controller's someProperty will automatically be propagated to the param of the component. The component can then define some computed property on param, or observe it, or use it in its own template where it will be automatically kept up-to-date.