How to get property of parent View in Ember?

Question

This is probably beyond easy, but I'm having a hard time to figure out how to access properties of parent views:

App.ParentView = Ember.View.extend({
  foo: 'bar',

  child_view: Ember.View.extend({

    init: function(){
       // get the value of App.ParentView.foo
       //  ???
    }
  })

});

Solution 1

To get the view: this.get('parentView')

To get the value of foo this.get('parentView.foo')

Solution 2

In Ember before 1.0.pre you could also use getPath method, instead of chains of get(), for more succinct (and generally safer) code:

this.getPath("parentView.foo");

What's cool in Ember 1.0.pre is that get() method now supports paths, so you can write

this.get("parentView.foo");

Solution 3

Tom is correct. I also created a JS Fiddle to demonstrate this and also illustrate the special contentView property, which can be useful in this type of situation: http://jsfiddle.net/rSLQK/2/

Comments

[chuckg]

Given a situation where you want to access the parent view in handlebars, you can use {{view.parentView.foo}}. ie: {{#view Wrapper}}<div>{{view.parentView.foo}}</div>{{/view}}

[Nico]

Newbies heads up! The code above here says App.parentView wich is misleading. You should always get("parentView") regardless to the name you have given your view.

[DexterW]

Thanks for this. Just saved me a lot of time.