Ember group by computed macro

group-by.js

import Ember from 'ember';

var get = Ember.get,
    arrayComputed = Ember.arrayComputed;

    
export default function (dependentKey, property) {
  
  var options = {  
    
    initialValue: [],

    addedItem: function(array, item, changeMeta, instanceMeta) {

      var key   = get(item, property),
          group = array.findBy('key', key);

      if (!group) {
        group = Ember.ArrayProxy.create({
          content: [],
          key: key
        });

        array.pushObject(group);
      }
      
      group.pushObject(item);

      return array;
    },


    removedItem: function(array, item, changeMeta, instanceMeta) {

      var key   = get(item, property),
          group = array.findBy('key', key);

      if (!group) {
        return;
      }
      
      group.removeObject(item);
      
      if (get(group, 'length') === 0) {
        array.removeObject(group);
      }
      
      return array;
    }

  };

  return arrayComputed(dependentKey, options);

}

z-group-by-controller-example.js

import Ember from 'ember';
import groupBy from '../utils/group-by';

export default Ember.ArrayController.extend({
  itemController: 'item',
  groupedContent: groupBy('@this', 'category')
});

z-group-by-template.hbs

{{#each groupedContent}}
  <li>{{key}}</li>
  <ul>
    {{#each}}
      <li>{{name}}</li>
    {{/each}}
  </ul>
{{/each}}