title: Ember.js: Group a model (using ArrayProxy)
body: <p>I have an array whose items I want to group, and then display in this grouped fashion. It's all terribly confusing:</p>
  
  <pre><code>App.GroupedThings = Ember.ArrayProxy.extend({
    init: function(modelToStartWith) {
      this.set('content', Ember.A());        
      this.itemsByGroup = {};  
  
      modelToStartWith.addArrayObserver(this, {      
        willChange: function(array, offset, removeCount, addCount) {},
        didChange: function(array, offset, removeCount, addCount) {
          if (addCount &gt; 0)
            // Sort the newly added items into groups
            this.add(array.slice(offset, offset + addCount))
        }
      });
    },
  
    add : function(things) {
      var this$ = this;
  
      // Group all passed things by day    
      things.forEach(function(thing) {
        var groupKey = thing.get('date').clone().hours(0).minutes(0).seconds(0);
  
        // Create data structure for new groups
        if (!this$.itemsByGroup[groupKey]) {
          var newArray = Ember.A();
          this$.itemsByGroup[groupKey] = newArray;
          this$.get('content').pushObject({'date': groupKey, 'items': newArray});
        }
  
        // Add to correct group
        this$.itemsByGroup[groupKey].pushObject(thing);
      });
    }
  });
  
  
  App.ThingsRoute = Ember.Route.extend({
    model: function() {
      return new App.GroupedThings(this.store.find('thing'));
    },
  });
  </code></pre>
  
  <p>This only works if I use the following template:</p>
  
  <pre><code>{{#each model.content }}
  </code></pre>
  
  <p>These don't render anything (an ArrayController is used):</p>
  
  <pre><code>{{#each model }}
  {{#each content }}
  {{#each}}
  </code></pre>
  
  <p>Why? Shouldn't the ArrayController proxy to "model" (which is GroupedThings), which should proxy to "content"?</p>
  
  <p>The reason this becomes a problem is that I then want to sort these groups, and as soon as I change the entire contents array (even using ArrayProxy.replaceContent()), the whole views rebuilt, even if only a single item is added to a single group.</p>
  
  <p>Is there a different approach to this entirely?</p>