Ember.js: Grouping/partitioning an ArrayController

Question

I have an ArrayController, and I would like to group the contents of that ArrayController based on a the value of a specific key.

For example, if the objects in my ArrayController are:

id   status   name
-----------------------------
1    1        some name
2    1        some other name
3    2        blah
4    3        blah again

Then I would like to group the contents by status.

To do this, I tried using computed properties in my ArrayController:

App.SomeArrayController = Ember.ArrayController.extend({
  itemController: 'some-item',      

  status1: Ember.computed.filterBy('content', 'status', 1),
  status2: Ember.computed.filterBy('content', 'status', 2),
  status3: Ember.computed.filterBy('content', 'status', 3)
});

In the template, these are being displayed, but they are not being wrapped by the itemController I specified in the ArrayController:

// item controller used in the ArrayController
App.SomeItemController = Ember.ObjectController.extend({
  anotherKey: function () {
    return 'hey ' + this.get('name');
  }.property('name')
});


<!-- template to display status=1 items -->
{{#each status1}}

  // displays the name (as a property from the model)
  {{this.name}}

  // nothing displays here
  // (leading me to believe it is not being wrapped by the item controller)
  {{this.anotherKey}}
{{/each}}

What am I doing wrong?

Answer 1

itemController only wraps items when you iterate over the controller collection.

{{#each item in controller}}
  {{item.coolItemControllerProperty}}
{{/each}}

It doesn't apply to any collection within the controller. If you tried to iterate the underlying model/content it wouldn't be wrapped.

{{#each item in content}}
  {{item.coolItemControllerProperty}} // undefined
{{/each}}

{{#each item in model}}
  {{item.coolItemControllerProperty}} // undefined
{{/each}}

fortunately you can specify an itemController in your template for these situations.

{{#each item in status1 itemController='some-item'}}
  {{item.coolItemControllerProperty}}
{{/each}}