Ember outlet in unnamed view

Connecting an outlet provided by an unnamed view that is unassociated with a controller

by wmarbut

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.6.1.js"></script>
<div id="app">
    
</div>
<script type="text/x-handlebars" data-template-name="index-view">
    <div style="border: 1px solid black">
    <p>I am the controller that will host the special outlet creating view</p>
    
    {{view App.UnassociatedView}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="unassociated-view">
    <div style="border: 1px solid green">
        hello, I'm the outlet view. the potato view should render below <br/> {{outlet potatoOutlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="potato-view">
    <div style="border: 1px solid blue">
    I am the potato view
    </div>
</script>

JavaScript

/**
 * My use case is to have a view that can create an arbitrary number of
 * outlets for a plugin based application that uses outlets to render
 * controller/view pairs into tabs in various parts of the application.
 *
 * The view that creates those outlets cannot be associated with a
 * controller. I need to be able to add it to various parts of the
 * application with the {{view}} helper as I have done here with the
 * `unassociated` view.
 *
 * Any insite into this would be most helpful.
 * irc #ember - grep_awesome
 * SO wmarbut
 */
window.App = Ember.Application.create({rootElement: '#app'});

App.ApplicationController = Ember.Controller.extend({});

App.ApplicationView = Ember.View.extend({ 
    templateName: 'index-view' 
});

App.UnassociatedView = Ember.View.extend({
    templateName: 'unassociated-view'
});

App.PotatoController = Ember.Controller.extend()
App.PotatoView = Ember.View.extend({
    templateName: 'potato-view' 
});



App.Router.map(function() {
});

App.ApplicationRoute = Ember.Route.extend({
    renderTemplate: function(){
        this._super();
        this.render();
        /* This doesn't work with "unassociated" or "application" */
        this.render('potato', {outlet: 'potatoOutlet', controller: this.controllerFor('potato'), into: 'application'});
    }
})