How do I render a template into a global component/outlet

Question

I have a question regarding rendering a route into a component/outlet.

I would like to have a component that sits in the application template that acts like a modal/popover.

When rendering a route, I would like to render the template into the component, and when the content changes, run some logic in the component that opens/closes the popover.

I'm hoping someone can enlighten me on how I would go about doing this?

Currently I have a component in the application template, that has a named outlet inside of it (see below). I can render the route into that named outlet, but I can't figure out how to pick up the changes in the content when it changes. Clicking different links will change the content of that outlet.

Any thoughts? A better way to accomplish what I'm wanting to do?

app/templates/application.hbs

{{#primary-popover}}
  {{outlet 'primary-popover'}}
{{/primary-popover}}

/app/profile/route.js

import Ember from 'ember';

export default Ember.Route.extend({

  renderTemplate() {
    this.render('profile', {
      outlet: 'primary-popover'
    });
  }
});

Alex Berdyshev Alex Berdyshev · Accepted Answer · 2015-07-16T23:08:49

I think the best way to solve your problem is to use liquid-fire http://ef4.github.io/liquid-fire/#/modals . It's recommended by ember core team library and also is well supported. It has nice modal component which can be triggered with link-to component or via this.transitionTo programmatically.

How do I render a template into a global component/outlet

1 Answers