Is it possible to observe arrays within arrays using @each?

Question

I have a controller that contains an array of "things". Within each of these things is an array of "subthings". I'd like to create a computed property that contains all subthings in all things (a flattened array of subthings).

My computed property depends on things.@each.subthings.length. I find that if I set the subthings property of a thing, my computed property is updated. However if I call pushObjects to add new data to my existing subthings array, my computed property does not update.

I've created a jsfiddle to demonstrate. The code is as follows:

App = Em.Application.create({});

App.controller = Em.Object.create({
    things: [
        Em.Object.create({subthings:[]}),
        Em.Object.create({subthings:[]}),
        Em.Object.create({subthings:[]})        
    ],

    allSubThings : function() {
        var things = this.get('things');
        var results = [];
        things.forEach( function(thing)  {
            results.pushObjects( thing.get('subthings') );
        });
        return results;
    }.property('things.@each.subthings.length').cacheable()        
});


setTimeout(function() {
    var things = App.controller.get('things');
    // This works:
    things.objectAt(0).set('subthings',[1,2,3]);
}, 1000);

setTimeout(function() {
    var things = App.controller.get('things');
    // This does not:
    things.objectAt(1).get('subthings').pushObjects([1,2,3]);
}, 2000);

​ Thanks!

Answer 1

Add another @each to the property list .property('things.@each.subthings.@each.length')

http://jsfiddle.net/tomwhatmore/pDQeT/3/