组件无法从路由访问

Question

我的 ember 应用使用 pod 结构，因此我的结构类似于：

├───pods
│   ├───application
│   ├───components
│   │   └───modal-picker
│   ├───login
│   ├───profile
│   │   ├───energy
│   │   │   └───source
│   │   ├───food
│   │   ├───transport
│   │   ├───travel
│   │   └───user
│   └───register

我有一个组件 modal-picker 组件，我想将它注入到 profile/transport 模板中，如下所示：

  <form>
    <button class="btn btn-primary" {{action 'showPicker' 'modal-picker'}}><i class="fa fa-plus"></i> Car</button>
    {{outlet 'modal-picker'}}
  </form>

showPicker 动作通过在路由中配置的动作触发所述选择器的显示：

showPicker: (name, model)->
       @render('modal-picker', Ember.Object.create().reopen
         outlet: 'modal-picker'
       )

这是组件中的代码

`import Ember from 'ember'`

ModalPickerComponent = Ember.Component.extend

  actions:
    show: (->
      @.$('.modal').modal().on 'hidden.bs.modal', =>
        @sendAction 'action', vehicule
    ).on('didInsertElement')

    pick: (vehicule)->
      @.$('.modal').modal('hide')
      @sendAction 'action', vehicule

`export default ModalPickerComponent`

当我点击 showPicker 按钮时，我收到以下错误：

Error: Assertion Failed: Could not find "modal-picker" template or view.

我尝试通过将以下行添加到我的 ProfileTransportRoute

来导入组件

`import ModalPickerComponent from 'components/modal-picker'`

然后我收到以下错误：

 Could not find module `components/modal-picker` imported from `impact-frontend/pods/profile/transport/route`

我也尝试了导入的变体，但没有成功。

我做错了什么？

Answer 1

如果您进入 Ember Inspector，您可以单击容器并查看 ember 知道的所有模板的名称。我使用新的 ember-cli 应用程序进行了快速测试，在您的情况下，它将是：

components/modal-picker

所以你的代码应该改为：

showPicker: (name, model)->
  @render('components/modal-picker'
    outlet: 'modal-picker'

编辑 1：

你想要一些模板渲染到模态，所以你会想要使用模态选择器组件，但是像这样：

routes/application.js

showPicker: (templateName, model)->
  @render(templateName
    into: 'application'
    outlet: 'modal-picker'
    model: model

模板/带模态按钮的模板：

<button class="btn btn-primary" {{action 'showPicker' 'some-cool-template' model}}><i class="fa fa-plus"></i> Car</button>

然后，当您在模板中调用 modal-picker 时，modal-picker 模板就是您的模态代码所在的位置，可能类似于：

组件/模态链接/模板

<div class="modal">
  <div class="modal-body">
    {{yield}}
  </div>
</div>

模板/some-cool-template

{{#modal-picker}}
  <p> some text, probably some form elements too</p>
{{/modal-picker}}

编辑 2：this is a good reference 用于 ember 中的模态（尽管它不完整）