Handlebars 参考组件上一级目录

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

Handlebars 参考组件上一级目录

Handlebars reference component one directory up

ember.js

handlebars.js

ember-data

ember-cli