无法从路由访问组件

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 检查器，您可以单击容器并查看 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

templates/template-with-modal-button:

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

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

components/modal-link/template

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

templates/some-cool-template

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

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

无法从路由访问组件

Component not accessible from route

javascript

components

ember.js

ember-cli