Handlebars上级目录组件引用问题：tabs-controls跨目录调用失败

先还原下你遇到的问题场景：

我编写了如下Handlebars代码：

{{#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">
//... 代码内容
</div>
{{/tabs-controls}}

但tabs-controls组件位于调用它的组件的上级目录，目录结构如下：

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

我尝试使用{{#../tabs-control}}等方式引用但未成功，请问如何正确引用该上级目录组件？

嘿，我一眼就看到问题所在了！在Ember这类基于Handlebars的组件框架里，模板引用组件根本不需要用相对路径，你之前的../写法完全是走偏了方向。给你说下正确的解决步骤：

第一步：先把组件名称对应上 #

你目录里的组件文件夹叫tabs-control，但代码里写的是tabs-controls（多了个s），这绝对是个低级坑！组件的文件夹名和模板里调用的名称必须严格对应——要么把文件夹改名为tabs-controls，要么把代码里的调用改成{{#tabs-control ...}}，先把这个名称统一了再说。

第二步：直接用组件名称调用就行 #

不管你的模板在hotspots子目录里还是更深的层级，只要目标组件在components根目录下，直接写它的名称就能引用，完全不用管路径。比如如果组件文件夹是tabs-control，你的代码应该改成这样：

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

特殊情况补充 #

如果你的项目用的不是标准Ember组件系统，而是自定义的组件加载逻辑，那可能需要通过JS模块导入组件再传递给模板，但这种情况非常少见。99%的场景下，只要组件名称和文件夹名对应，直接调用名称就搞定了。

内容的提问来源于stack exchange，提问作者codemon