把手引用组件一目录

Question

我有以下代码：

{{#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}}

但是tabs-controls是一个组件，它位于调用它的组件的目录之外。

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

我试过了：

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

两者都没有英镑符号......我得到的只是编译器错误。

实现这一目标的正确方法是什么？

Answer 1

Handlebars中的这种相对路径更多地是关于导航渲染上下文而不是文件布局。使用示例from the Handlebars documentation，如果您使用each的上下文切换版本，则可以执行以下操作：

{{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}}

然而，这不适用于Ember，因为删除了帮助者的上下文切换形式。

考虑组件路径的方法是/components是根，所以如果你有/components/tabs-control，你调用它的方式是{{tabs-control}}。如果您要呈现/components/hotspots/hotspots-container，那么执行此操作的方式是{{hotspots/hotspots-container}}。