Question

Is there an easy way to access to the root view from a deeply nested child view in an Ember.ContainerView. I’d like to bind a property of the root and a subsubchild :

Ember.ContainerView.create {

   childViews: ['child1']

   value: null

   child1: Ember.ContainerView.create {

       childViews: ['subchild1']

       subchild1 : Ember.View.create {

            valueBinding: "parentView.parentView.value"

       }
   }
}

I’d like to bind value in the root with value in subchild1 but I found that calling

parentView.parentView.parentView.property

is not very elegant.

Answer 1

You can use the nearestWithProperty method. See the following for an example.

Ember.ContainerView.create({
   childViews: ['child1'],
   value: null,
   isRootView: true,

   child1: Ember.ContainerView.extend({
       childViews: ['subchild1'],

       subchild1 : Ember.View.extend({
           rootView: Ember.computed(function() {
               return this.nearestWithProperty('isRootView');
           }).property().cacheable(),
           valueBinding: "rootView.value"
       })
   })
});