Making modal component

Ember CLI
1

I’m try to make modal component like bootstrap modal. I can’t ensure where to puts the js code. Because it is possible used in any where, route, controller or component.

My current solution is create a component and use it in application.hbs. For active the modal, I register some method alertModal, confirmModal and spinner and inject them into controller, component, route.

For example, I can invoke this.alertModal(...) in controller to active the modal.

But is there any better way to build the modal?

2

Yeah, don’t make one at all. Should just be a matter of applying bootstrap classes to the the many already existing addons out there. Ember Observer

For the programmatic approach, how I achieved this in the past is I would trigger an action that the application route would be responsible for handling. I would have a named outlet in my application template and essentially call this.render(...); inside of the action handler.

this.render('modal-tmpl', {
 into: 'application',
 outlet: 'modal-outlet',
 controller: 'modal'
});
3

@jasonmit thanks. I had used this solution before, but Ember.View will be deprecated in ember 2.0, I’m not sure the {{outlet "modal-outlet"}} could be used as the same way as before, and I want to build an addon used in the ember-cli projects.

4

Haven’t been tracking routable components, but last I knew they were not going to land until later on in 2.0 now. So that means outlet will remain, and so then I assume renderTemplate will also be sticking around until the replacement is introduced.

5

Have you seen this https://dockyard.com/blog/2015/06/08/a-clean-pattern-for-modal-dialogs ?

1 Like