Component not accessible from route

Question

My ember app uses a pod structure so that I have a structure similar to:

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

I have a component modal-picker component that I want to inject into the profile/transport template as follows:

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

The showPicker action triggers the display of said picker via an action configured in the route:

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

here's the code in the component

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

When I click on the showPicker button I get the following error:

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

I tried doing an import of the component by adding the following line to my ProfileTransportRoute

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

But then I get the following error:

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

I also tried variations of the import, but without success.

am I doing something fundamentally wrong?

Answer 1

If you go into your Ember Inspector, you can click on container and see the names of all the templates ember knows about. I did a quick test with a new ember-cli app, and it looks like in your case it will be:

components/modal-picker

so your code should change to:

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

EDIT 1:

you want some template to render into the modal, so you'll want to use the modal-picker component, but like so:

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>

Then, when you call the modal-picker in the template, the modal-picker template is where your modal code goes, probably something like:

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

EDIT 2: this is a good reference for modals in ember (though it is incomplete)