Question

我的余烬应用程序使用pod结构，因此我的结构类似于：

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

我有一个组件模态选择器组件，我想将其注入配置文件/传输模板，如下所示：

  <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：

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

<强>路由/ 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>

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

<强>组件/模态链路/模板

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

<强>模板/一些 - 冷却 - 模板

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

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

组件无法从路径访问

1 个答案: