Dynamically setting controllers in {{#each}} with Ember

Question

In Ember you can dynamically lookup controllers with {{#each}} doing something like this according to the guides:

Template:

{{#each controller}}
  {{name}}  
{{/each}}

Array controller:

App.DocumentListController = Ember.ArrayController.extend
  lookupItemController: ((object) ->
    if @get('name') == 'something' then 'someController'
    else 'someOtherController'

I have a situation where I want to do the same thing but I need to use an ObjectController instead of an ArrayController.

So my template would look more like this:

{{#each controller in controller.documents itemController=lookupItemController}}
  {{name}}
{{/each}}

Object controller:

App.DocumentListController = Ember.ObjectController.extend
  lookupItemController: (object) ->
    if @get('name') == 'something' then 'someController'
    else 'someOtherController'

This second example is just made up and doesn't work. Is there a way to dynamically set controllers like this in an {{#each}}? Is there a better way to accomplish this?

Can you explain why your Document List Controller needs to be an ObjectController and not an ArrayController? There's no need to be parsimonious with controllers, so it should be simple to split out the responsibilities appropriately. — Christopher Swasey

Christopher Swasey Christopher Swasey · Accepted Answer · 2013-03-13T21:29:36

What you might do in this instance is something like:

App.ListController = Ember.ObjectController.extend
    needs: ['documents']

App.DocumentsController = Ember.ArrayController.extend
    needs: ['list']
    contentBinding: 'controllers.list.documents'
    lookupItemController: (object) ->
        if @get('name') == 'something' then 'someController'
        else 'someOtherController'

And then in your template (assuming 'ListController' is the controller for the view):

{{#each document in controllers.documents}}
    {{document.name}}
{{/each}}

Dynamically setting controllers in {{#each}} with Ember

1 Answers