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}}
{{outlet potatoOutlet}}
</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/>
</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',
LOG_TRANSITIONS: true
});
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.IndexRoute = Ember.Route.extend({
renderTemplate: function(){
this._super();
var controller = this.controllerFor('potato');
//this.render();
/* This doesn't work with "unassociated" or "application" */
this.render('potato', {outlet: 'potatoOutlet', controller: controller});
}
})