Handlebars reference component one directory up

Question

I have the following code:

{{#tabs-controls initial='content' modal="true" title="Hotspots" tabs=tabs style="on-ground" as |uniqueTarget currentTab|}}
  <div class="tab-pane active" id="content-{{uniqueTarget}}" role="tabpanel">
    //... Code
  </div>
{{/tabs-controls}}

However tabs-controls is a component that lives outside the directory of the component calling it.

-components
   -tabs-control
   -hotspots
       -hotspots-container
       -hotspots-content
              -template.hbs

I've tried:

{{#../tabs-control}} 
{{#../..tabs-control}}

Both again without the pound sign...All I get are compiler errors.

What is the right way to achieve this?

Answer 1

This sort of relative path in Handlebars is more about navigating the rendering contexts than about file layout. Using the example from the Handlebars documentation, if you were using the context-switching version of each you could do:

{{permalink}}
{{#each arrayOfObjects}}
  {{..permalink}} <!-- you are accessing the permalink property above -->
  {{permalink}}  <!-- you are accessing the permalink property of the of the object being "eached"  -->
{{/each}}

However, this doesn't apply to Ember since the context-switching forms of helpers were removed.

The way to think about the path to components is that /components is the root, so if you have /components/tabs-control, the way you call it is {{tabs-control}}. If you want to render /components/hotspots/hotspots-container, the way to do it is {{hotspots/hotspots-container}}.