Is it possible for a view to observe a parent's property?


I have a component with a few sub-views and I would like that one of those views to be able to observe one of its parent’s properties. Is that possible? and if not, how can I achieve it?

I’m able of showing in the console the info of that property by typing ‘controller.propertyX’ but when I try to observe it does nothing.

It seems that ‘parentView.parentView…parentView.propertyX’ does the job but it doesn’t seem very elegant :confused:

Hmm, it seems like a contradiction to the ‘data down, actions up’ principle.

Would it not be possible for the parent to send a message to the component if something changes?

How can I send a message from the parent?

This kind of pattern, given a parentFoo you want to bind. This way it is passed down to the bottom component. Hope this makes sense.

{{top-component parentFoo=parentFoo}}


  {{middle-component parentFoo=parentFoo}}


  {{bottom-component parentFoo=parentFoo}}

In bottom-component you should have access to parentFoo e.g.

import Ember from 'ember';

export default Ember.Component.extend({
  someFunction: function() {
    var pFoo = this.get('parentFoo');
    // do something interesting with it!

Basically you’re just passing the property into the bottom component explicitly, rather than the bottom component asking its parent for the property of its parent!

So it needs to go through each element between the parent and the desired child. Isn’t it adding a lot of unnecessary properties to the intermediate children?

By the way, thank you very much for your example :smile:

It’s just one possible way of doing it.

There are many others, but this seemed reasonable based on the description you gave. Without a bit more context and / or code sample, it’s difficult to offer alternatives.

One other possible way would be to use block syntax New Component Patterns in Ember.js, the first section of these slides may help.