Aurelia computedFrom array of objects

  • Hey folks :)

    Today at work we made some changes in our Aurelia application which lead to some unforseen changes. The model setup is a parent class which holds a list of child classes. The parent class have a getter which returns true or false based on all children having a certain property or not.



    This worked previously because the children array was itself modified and therefore the getter re-evaluated. Now the code changed so that only the specific property of the children change and the getter isn't called in this case. After wasting some time with Google and even ask the community in discourse I've found NO acceptable solution. So I checked how the computedFrom decorator works and wanted to create my own.

    How it works

    First of all I want to say that I might miss something here as I only had a shorter look. As far as I can see it tThe original computedFrom decorator just takes your string parameter list and puts it into the property dependencies on the getter function. Once the template is parsed the attributes and string interpolations are evaluated and bound (connected) to the related object. This connection is actually just a subscription to changes of those properties. The common logic uses the Aurelia Parser to parse the dependency expressions and connect on the outcome. And here we have the problem. The Aurelia Parser doesn't support wildcards but only clear results, which means only one specific target property. So what we need is a custom expression whose takes our dependencies and connects to all found target properties based on wildcards in the expression. To do so I created a custom expression which splits the dependency expression string on [*]. , interprets each part as own expression and connects to all results.


    That said here is my result :)


    The usage is faily simple and similar to the original computedFrom decorator of Aurelia. If you have like me a property which holds an array of objects you can access each the properties of each object in that array by using a wildcard children[*].propname.


    Here is an example


    Limitations

    I just figured out some limitations by Aurelia which requires the list of children to be less than 100. The reason for that is that Aurelia holds a list of slotNames for the observers and after 99 there is none. After 99 it will result in using the slot name undefined. This leads to an infinite loop by searching for a free slot name as the counter can be infinite incremented but will not find something else than undefined. Possible solutions would be a Pull Request to Aurelia or create a reused observer instead of connecting to the expression. That might be something for further improvements but for now it's sufficient in my case :)



    I hope that helps you to handle objects in an array in Aurelia like it helped me :)

Share