Property dependencies on object attributes

Question

I'd like to use the property dependencies to avoid dirty checking on computed properties. Since the properties on which the computed property depends are no primitives but attributes of an object I don't know how to make this work.

Code:

import {computedFrom} from 'aurelia-framework';

export class Person {
    personData = {
        firstName: 'John',
        lastName: 'Doe',
        // More attributes...
    }

    // ...

    // Doesn't work:
    @computedFrom('personData.firstName', 'personData.lastName')
    // Neither does:
    // @computedFrom('personData["firstName"], 'personData["lastName"]')
    // Nor:
    // @computedFrom('personData')
    get fullName() {
        return `${this.personData.firstName} ${this.personData.lastName}`;
    }

    // ...
}

score 2 · Accepted Answer · answered Jan 21 '16 at 12:02

The @computedFrom attribute will soon add support for expressions- keep an eye on https://github.com/aurelia/binding/pull/276

A word of caution- overusing @computedFrom (eg @computedFrom(p1.p2.p3, p4.p5, p6, p7, p8)) could end up being less performant than dirty-checking. There's a tradeoff between the one-time setup of observers vs the continuous function evaluation with dirty-checking- your mileage may vary.

another option would be to use the with binding in your view and bind to your object props directly:

<span with="personData">${firstName} ${lastName}</span>

Last but not least, there's the aurelia-computed plugin which can parse getter function bodies and produce an observer that doesn't use dirty-checking: https://github.com/jdanyow/aurelia-computed

has with been added back in? – Matthew James Davis Feb 08 '16 at 15:44 — Matthew James Davis, Feb 08 '16 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

I would add watchers (https://stackoverflow.com/a/28437456/3436921) on personData properties and set fullName manually.

or

Use @computedFrom('personData') and always create new personData when properties changed this.personData = Object.assign({}, this.personData, {firstName: "new first name"})

edited May 23 '17 at 11:45

Community

1
1

answered Jan 21 '16 at 10:31

valichek

1,186
6
9

Watchers would be an option, if it turns out that the `computedFrom` decorator doesn't support object attributes. The second suggestion is no option since `personData.firstName` and `personData.lastName` are bound to UI input controls and manually intercepting the data-flow to always create a new `personData` object is too much hassle and no good style anyway. – suamikim Jan 21 '16 at 11:07

Property dependencies on object attributes

2 Answers2