Ember JS Dynamically render template based on content in model

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

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.

Kingpin2k Kingpin2k · Accepted Answer · 2013-08-27T04:11:35

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);
   }

Ember JS Dynamically render template based on content in model

1 Answers