Dynamic creation of outlets

Question

Say I have an application with two routes: "/ services" and "/ services /: service".

When a user visits the state: service, I would like him to look at a list of information related to one particular service. Still trivial.

However, when the same visitors visit / services, I would like to show a list of services, as well as information about the service (for each service). I would also like to do this without duplicating patterns.

The outputs seemed to be the obvious answer, however it seems that all the outputs should be statically named, and I have a predetermined number of them. They all have unique names, but, of course, I can not recode the names in the template. I would like to dynamically determine socket names, so I can call this.render accordingly in renderTemplate to populate them, but I don't know how to do this.

What would you suggest?

UPDATE: It seems that I can handle my specific case using {{template}}, but this does not bind another route as such. I would still like to know how to do this; I will do more complex things later, where it will definitely be better, and still duplicate the code in the respective controllers.

UPDATE: I ended up creating my own dynOutlet helper, as such:

// Define "dynamic outlets". These are just like normal outlets, // except they dereference the outlet name. Handlebars.registerHelper('dynOutlet', function(property, options) { Ember.assert("Syntax: {{dynOutlet <property>}}", arguments.length === 2); var context = (options.contexts && options.contexts[0]) || this, normalized = Ember.Handlebars.normalizePath( context, property, options.data), pathRoot = normalized.root, path = normalized.path, value = (path === 'this') ? pathRoot : Ember.Handlebars.get( pathRoot, path, options); return Ember.Handlebars.helpers.outlet(value, options); }); 

I have yet to find out if it will work the way I want.

Answer 1

I also needed to define a dynamic weekend. This is an implementable helper:

 Ember.Handlebars.registerHelper('dynamicOutlet', function(property, options) { var outletSource; if (property && property.data && property.data.isRenderData) { options = property; property = 'main'; } outletSource = options.data.view; while (!(outletSource.get('template.isTop'))){ outletSource = outletSource.get('_parentView'); } options.data.view.set('outletSource', outletSource); var firstContext = options.contexts.objectAt(0); options.hash.currentViewBinding = '_view.outletSource._outlets.' + firstContext.get(property); var controller = App.__container__.lookup("controller:movies"); options.contexts.clear(); options.contexts.addObject(controller); return Ember.Handlebars.helpers.view.call(controller, Ember.Handlebars.OutletView, options); }); 

So I use it in my templates:

 <div> {{title}} <!-- accessing title property of context --> {{dynamicOutlet outletName}} <!-- accessing the property that should be used as name of the outlet --> </div> 

The helper allows you to use model properties as product names.