ember.js: [Glimmer] Nested components no longer have access to their parent?

I recently tried upgrading ivy-tabs to Ember 1.13 and ran into some issues around changes to parentView in components. Prior to 1.13, a nested component could access its outer component through parentView. I was using this in ivy-tabs to register an ivy-tab component with the ivy-tab-list that contained it, among other things:

{{#ivy-tab-list}}
  {{#ivy-tab}}Tab 1{{/ivy-tab}}
  {{#ivy-tab}}Tab 2{{/ivy-tab}}
  ...
{{/ivy-tab-list}}

It seems that with the 1.13 upgrade, parentView is now always the “routable” view that rendered the component, and I don’t see a way for components to access each other at all. Is my example an intended use case? If not, is there some other way to do what I want?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 15 (11 by maintainers)

Most upvoted comments

Given the relatively large number of addons that are affected by this, I think we should attempt to match the 1.12 semantics with this.get('parentView') from within a component.

Given the initial example:

{{#ivy-tab-list}}
  {{#ivy-tab}}Tab 1{{/ivy-tab}}
  {{#ivy-tab}}Tab 2{{/ivy-tab}}
  ...
{{/ivy-tab-list}}

Inside the {{ivy-tab}} instances, calling this.get('parentView') should return the instance of {{ivy-tab-list}}.

Even though we should definitely fix this issue, I do believe that the better pattern would be to use block params and provide each {{ivy-tab}} instance with its parent. So the above example would become:

{{#ivy-tab-list as |list|}}
  {{#ivy-tab list=list}}Tab 1{{/ivy-tab}}
  {{#ivy-tab list=list}}Tab 2{{/ivy-tab}}
{{/ivy-tab-list}}

Yes, I realize that may not be as aesthetically pleasing but it is easier to reason about. In the long run, I think the following is the best API:

{{#ivy-tab-list as |list|}}
  {{#list.ivy-tab}}Tab 1{{/list.ivy-tab}}
  {{#list.ivy-tab}}Tab 2{{/list.ivy-tab}}
{{/ivy-tab-list}}

It allows the ivy-tab child component to be completely scoped to its parent (without the manual wiring of list=list), and is still quite declarative. This syntax will be unlocked by https://github.com/emberjs/ember.js/pull/10244 once I have time to work on it again.

tldr; I think we should deprecate accessing parentView and suggest using block params.

rwjblue on May 21, 2015