insert component without calling handlebars helper or a controller with outlet

Question

I want to insert a component into controller template without using the handlebars helper (component "component-name"... or component-name). Or through a controller in an outlet (or as long as the solution works for a component that wants to insert another component, then it's fine, I don't think outlets work in components).

In other words:

App.IndexController = Ember.Controller.extend({
  actions: {
     insertComponent: function() {
       var component = this.container.lookup("component:my-inserted", { singleton: false });
       component.set("layoutName", "components/my-inserted");

       // to be like handlebars-inserted component, what do i do here?
     }
  }
});

You can use test with this: http://emberjs.jsbin.com/popozanare/4/edit?html,js,output

Why?

Thinking of a way of to have clean modal syntax, such as the "openModal" syntax described in the Ember Cookbook: http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/using_modal_dialogs/.

The problem is that the source context is lost, as the modal is within the ApplicationRoute. I want the same syntax when calling a modal, but keeping the hierarchy. You can keep the hierarchy using https://github.com/yapplabs/ember-modal-dialog, which requires a mapping of variables... which i don't like either (but will likely implement if I have no other choice).

TD;LR: Want to open modal within the controller/component (context) that called it without scaffolding in the controller/component that called it (mapping variables, etc).

Edit:

On second thought, using a container view might be cleaner than mapping variables, found in this solution: http://jsbin.com/hahohi/1/edit?html,js,output. Still needs scaffolding though. Thanks @user3568719.

Could you give us a use case? Maybe there is a workaround. You can do component. create(). But u have to have a ContaierView to insert it into it. Take a look at this model service, maybe it gives you some idea: jsbin.com/hahohi/1/edit?html,js,output — user3568719
@Kitler edited issue to state why (you might not like why...) — s12chung
@user3568719, funny, you kind of guessed the use case. don't think container view will do it.... — s12chung

Patsy Issa Patsy Issa · Accepted Answer · 2015-06-24T12:27:52

That cookbook is a bit outdated, but if you are looking for a "clean" way to handling modals in your app I would suggest named outlets.

Add it to your application or auth template {{outlet "modal"}} and when you want to bring up the modal you can catch the action on the corresponding route and then render into that named outlet like so:

this.render('your-desired-modal-template', {
  into: 'auth',
  outlet: 'modal'
});

And when you want to dismiss it simply disconnectOutlet like so:

this.disconnectOutlet({
  outlet: 'modal',
  parentView: 'auth'
});

This is the way we've been going about it, I m open to suggestions/better methods.

insert component without calling handlebars helper or a controller with outlet

1 Answers