Can I render a view into an outlet in Ember.js?

Question

I am trying to display a modal dialog in my application and want to be able to programmatically render it to the page. My root template looks like this

{{outlet}}
{{outlet "modal"}}

Then when a user presses a button, a controller action is fired and I want to be able to call something like

App.Modal.create().appendTo("modal");

Obviously that won't work since appendTo takes a jquery selector but does anyone know of a better way to do this?

Edit:

I could also just use the appendTo method but everytime I do I get a deprecated warning cannot append to default container. I was using a ContainerView and appending that and then updating the container view but nothing worked.

have a look at this question stackoverflow.com/questions/17396994/…, it may help you — intuitivepixel

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-07-03T17:53:57

Instead of handling button press via a controller action, let it bubble up to the router. Since your outlet is defined in application.hbs it makes sense to handle the event in ApplicationRoute. Something like:

App.ApplicationRoute = Ember.Route.extend({
  events: {
    openModal: function() {
      this.render('modal', { into: 'application', outlet: 'modal' });
    }
  }
});

This will render your modal view/template into the modal outlet of the application template.

Can I render a view into an outlet in Ember.js?

Edit:

1 Answers