Computed Properties with @each

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  owner: Ember.computed(function() {
    return this.store.createRecord('owner');
  }),
  
  cleanItems: Ember.computed('owner.items.content.@each.status',function() {
    return this.get('owner.items').filterBy('status', 'clean');
  }),
  
  dirtyItems: Ember.computed('owner.items.content.@each.status',function() {
    return this.get('owner.items').filterBy('status', 'dirty');
  }),
  
  actions: {
    
    addCleanItem() {
      this.store.createRecord('item', {
        owner: this.get('owner'),
      	status: 'clean' 
      })
    },
                              
    addDirtyItem() {
      this.store.createRecord('item', {
        owner: this.get('owner'),
      	status: 'dirty' 
      })
    },
    
   	updateItem(item, status) {
     	item.set('status', status); 
    }
  }
});

application.template.hbs

<button {{action "addCleanItem"}}>Add clean item</button>
<button {{action "addDirtyItem"}}>Add dirty item</button>
<hr>
<h3>All items ({{owner.items.length}})</h3>
{{#each owner.items as |item|}}
	<li>{{item.id}} ({{item.status}})</li>
{{/each}}
<h3>Clean items ({{cleanItems.length}})</h3>
{{#each cleanItems as |item|}}
	<li>{{item.id}} <button {{action "updateItem" item "dirty"}}>Make dirty</button></li>
{{/each}}
<h3>Dirty items ({{dirtyItems.length}})</h3>
{{#each dirtyItems as |item|}}
	<li>{{item.id}} <button {{action "updateItem" item "clean"}}>Make clean</button></li>
{{/each}}

models.item.js

import DS from 'ember-data';

export default DS.Model.extend({
  owner: DS.belongsTo('owner'),
  status: DS.attr('string')
});

models.owner.js

import DS from 'ember-data';

export default DS.Model.extend({
  items: DS.hasMany('item'),
  
  cleanItems: Ember.computed('items.@each.status',function() {
    return this.get('items').filterBy('status', 'clean');
  }),
  
  dirtyItems: Ember.computed('items.@each.status',function() {
    return this.get('items').filterBy('status', 'dirty');
  }),
});

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.2.0",
    "ember-data": "2.2.0",
    "ember-template-compiler": "2.2.0"
  }
}