nested array depkey

controllers.application.js

import Ember from 'ember';

const computed = Ember.computed;

const Inner = Ember.Object.extend({
  people: null,
});

const Person = Ember.Object.extend({
  name: null,
});

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  actions: {
    addSomeone() {
      this.get('outer.firstObject.people').pushObject(Person.create({
        name: 'Cersei',
      }));
    },
    
    forceRecomputation() {
      this.propertyWillChange('names');
      this.propertyDidChange('names');
    }
  },
  
  outer: [Inner.create({ people: [Person.create({ name: 'Tywin' })]})],
  
  names: computed('outer.@each.people.[]', function() {
    return this.get('outer').reduce((acc, inner) => {
      return acc.concat(inner.get('people').mapBy('name'));
    }, []);
  })
});

templates.application.hbs

This list doesn't update when we hit <em>add someone</em>.  We know the CP works by hitting <em>force computation</em>.

<br>
<br>
<ul>
  {{#each names as |name|}}
    <li>{{name}}</li>
  {{/each}}
</ul>

<hr />

<button {{action 'addSomeone'}}>add someone</button><br />

<button {{action 'forceRecomputation'}}>force recomputation</button><br />
<br>
<br>


See <a href="https://github.com/emberjs/ember.js/issues/5043">emberjs/ember.js#5043</a>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}