On not using outlets

Design
1

Frequently I need the ability to insert miscellaneous components into the DOM. e.g. Modals, Tooltips etc…

If you try to appendTo the application view, Ember won’t let you.

I’ve seen some people appendTo the rootElement, which works - but then your component is ‘sitting outside’ of your app (which creates problems when running acceptance tests).

I’ve come up with this: JS Bin - Collaborative JavaScript Debugging

Essentially, I’m looking for feedback as to whether I’ve lost my way… because its quite a convoluted process for something which should be trivial.

Are there any other techniques out there?

3 Likes
2

I use named outlets for some things, like modals and sidebars. See this example: JS Bin - Collaborative JavaScript Debugging

3

Use of named outlets is possible when DOM is generated by Ember… what about the case when DOM is generated by some other UI library (see e.g. StackOverflow)?

I believe this is quite common scenario, specially when migrating existing apps to Ember. It would be very helpful if there was an official way to handle cases like this.

4

The solution is to use detach and viewName:

{{my-component viewName='myComponent'}}

//controller
var $target = Ember.$('#my-component-container');
var $myComponent = this.get('myComponent').$();

$myComponent.detach();
$target.append($myComponent);