Trouble passing a yielded hash to a contextual component

@samselikoff wrote:

Say I have a <DropdownList> component that can be used like this:

<DropdownList as |List|>
  <List.item>
    Menu A
  </List.item>
  <List.item>
    Menu B
  </List.item>
</DropdownList>

Now I’m working on a higher-level <NavigationMenu> component. It will use <DropdownList> & its contextual <Item> under the hood:

{{! navigation-menu.hbs }}

<DropdownList as |List|>
  {{yield (hash
    item=(component 'navigation-menu-item' List=List)
  )}}
</DropdownList>

{{! navigation-menu-item.hbs }}

<List.item>
  {{yield}}
</List.item>

However, this produces weird output: in the actual DOM tree, I see <list.item>:

image.png998×376 36.7 KB

Then, if I try to yield out in that component’s template

  {{! navigation-menu-item.hbs }}

- <List.item>
+ <List.item as |Item|>
    {{yield}}
  </List.item>

I get a compilation error:

image.png1890×428 39.8 KB

The fix I’ve managed so far is instead of passing through the contextual List, I can pass through List.item:

  {{! navigation-menu.hbs }}

  <DropdownList as |List|>
    {{yield (hash
-     item=(component 'navigation-menu-item' List=List)
+     item=(component 'navigation-menu-item' Item=List.item)
    )}}
  </DropdownList>

and then render <Item> directly in my <NavigationMenuItem> component:

  {{! navigation-menu-item.hbs }}

- <List.item as |Item|>
+ <Item as |Item|>
    {{yield}}
- </List.item>
+ </Item>

and then everything works!

Could someone help me understand what’s going on?

• Why does passing through List not work but List.item does? Are these things different when invoked from a parent vs. child template?
• Am I using any of these things incorrectly?
• The compilation error doesn’t make sense to me - how does the compiler know whether <List.item> is a component or not?

Thanks!

Posts: 1

Participants: 1

Read full topic