Ember outlet in unnamed view
Connecting an outlet provided by an unnamed view that is unassociated with a controller
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}}] after the outlet.
</div>
</script>
<script type="text/x-handlebars" data-template-name="potato-view">
<div style="border: 1px solid blue">
I am the potato view and I love Potatoes...
</div>
</script>
JavaScript
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 doesn't work with "unassociated" or "application" */
//this.render('potato', {outlet: 'potatoOutlet', controller: this.controllerFor('potato'), into: 'application'});
// var controller = this.controllerFor('potato');
// this.render('potato', {outlet: 'potatoOutlet', controller: controller});
}
});