Modals as components not controllers

1

I searched but nothing made me happy.

I found this: #1 Najbardziej zaufany przewodnik po polskich kasynach online w 2022 roku

But he’s using controller. I need to use components.

How can I use this code for component?

app/routes/application.js

showModal(name, model) {
  console.log('showModal() in application.js called!');
  this.render('components/' + name, {
    into: 'application',
    outlet: 'modal',
    model: model
  });
},

removeModal() {
  console.log('removeModal() in application.js called!');
  this.disconnectOutlet({
    outlet: 'modal',
    parentView: 'application'
  });
}

this.render just render, of course, the .hbs of my component. The code (like didInsertElement) of that component is not executed.

Maybe with a fake template in templates folder? But how?

1 Like
2

This blog post is from 2014 when using a controller and renderTemplate was probably the best option to render a modal (the key issue being that you needed the modal content to be rendered in a different part of the DOM — this was, as far as I know, the only good way to do this).

Nowadays, the trend seems to be leaning toward using one of a couple addons to do this: ember-wormhole, liquid-wormhole, and ember-elsewhere.

These addons let you render a component in your template normally, but the actual html will be inserted somewhere else.

Hope this helps!

2 Likes
3

You can also use the component helper as in this thread In hierarchy modals without being “in template”?

4

But in this thread they talk about a service… I need it really?

5

You could do the same job as the service in routes/application.js. You don’t need a service but it does isolate that concern. It also means that you don’t have to bubble events all the way up to the application route. You can inject the service where you need it, making it alot more convenient when you nest components

6

I answered in this post: In hierarchy modals without being "in template"?

What do you think about this?

Ember Twiddle

Anyway I have a problem: how to activate willDestroy() and willRender() of every component and sub-component?

I need this for the Bootstrap modals methods.

How to?

7

I have answered there too :slight_smile: