ember-bug-multi-brace-plus-arrayproxy

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  items: [
    { id: 1, test: true, cat: 1},
    { id: 2, test: true, cat: 2},
    { id: 3, test: true, cat: 3},
    { id: 4, test: true, cat: 4},
    { id: 5, test: false, cat: 1},
    { id: 6, test: false, cat: 2},
    { id: 7, test: false, cat: 3},
    { id: 8, test: false, cat: 4},
    ],
  testFilter: false,
  
  filtered: Ember.computed('testFilter', '[email protected]', function() {
    let result = this.get('items');
    if (this.get('testFilter')) {
      result = result.filterBy('test');
    }
    return result;
  }),
  
  multiEach: Ember.computed('filtered.@each.{cat,id}', function() {
    return this.get('filtered').filter((item) => (item.id + item.cat) % 2 == 0);
  }),
    
  correct: Ember.computed.alias('multiEach'),
  bugged: Ember.computed(function() {
    return Ember.ArrayProxy.create({parent: this, content: Ember.computed.alias('parent.multiEach')});
  }),
});

templates.application.hbs

<h1>Multi brace expansion bug</h1>
Every change of the Filter checkbox should result in a change in the resulting list length
<br/><br/>
<label>{{input type="checkbox" checked=testFilter}} Filter</label><br>
<label>{{input type="checkbox" checked=showCorrect}} Show correct</label><br>
<br/>
{{#if showCorrect}}
Correct: {{correct.length}}<br/>
{{/if}}
Bugged: {{bugged.length}}<br/>
<br>
<br>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}