Aurelia - no ModifyCollectionObserver for a nested array referenced by a computedFrom decorator?

Question

So let's assume my class is something like this:

import { computedFrom } from 'aurelia-framework';

export class Test {

    myObj;

    @computedFrom('myObj.myArray')
    get someProperty() {
        debugger;
        return JSON.stringify(this.myObj ? this.myObj.myArray : this.myObj);
    }

    attached() {
        this.myObj = {
            myArray: []
        };

        setTimeout(() => this.myObj.myArray.push('foo'), 500);
    }

}

and my HTML is just:

<template>
    <h3>myArray value: ${someProperty}</h3>
</template>

I've got an issue where someProperty is not being updated when I push an element into myObj.myArray. I verified this with the debugger in the someProperty getter. When this.myObj is originally set in attached and the someProperty getter is subsequently called, I see that myObj is a SetterObserver in this.__observers__.

However, I don't see any ModifyCollectionObserver for myArray in this.myObj.__observers__ (in fact, that __observers__ property doesn't even exist). I would expect that there would be some sort of observer on the array since it is specified as a dependency in my computedFrom decorator.

Answer 1

You can change your computedFrom decorator to the following and things will start working:

 @computedFrom('myObj.myArray.length')

This is because the length property will change when you push an item in to the array, and Aurelia can observe that change.