Ember JS Dynamically render template based on content in model - ember.js

Question

I am trying to programmatically render different templates into a named outlet based on a specific value in my model.
Here are two JSBin examples:
This one shows the basic structure but the specific render code is commented out.
http://jsbin.com/OhegexO/1/
But when I try to use the renderTemplate method in my route it doesn't work
http://jsbin.com/OhegexO/2/
I see the following errors in my console
Error while loading route: TypeError {}
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined
I can seem to figure this out. The use case is that I want to use different templates based on some parameter that will be in my model.

Answer 1

Admittedly I'm not very familiar with rendering into named outlets, but it appears it won't render into an outlet that hasn't been rendered yet. That being said it's possible instead of doing it from renderTemplate, you could allow the product template to render normally (don't override renderTemplate), then render the edit form delayed, into the product template afterward (see 2nd jsbin). That's a little awkward, so if you wanna hijack the renderTemplate for the sake of it, see this first jsbin. They both involve waiting for the product template to render, then rendering it.
And I believe if you override the renderTemplate hook, it skips the default rendering, hence never rendering the product template. After further investigation, this is true, if you super it, it works as well. BTW this._super() says run the default implementation of this method as well.
http://jsbin.com/ujiKire/5/edit
Using setup controller:
http://jsbin.com/OvONejo/1/edit
setupController: function(controller, model){
var templateEditForm = model.get('editform');
var templateInto = 'product';
var templateOutlet = 'editform';
console.log("render the [%s] form into the [%s] template, using the [%s] outlet",templateEditForm, templateInto, templateOutlet);
// Why does this code not work
var self = this;
Ember.run.later(function(){
self.render(templateEditForm, { // the template to render
into: 'product', // the template to render into
outlet: templateOutlet, // the name of the outlet in that template
controller: controller // the controller to use for the template
});
},1);
}