CODEWITHSUNDEEP
javascriptaurelia
suamikim
suamikim

Reputation: 5319

Property dependencies on object attributes

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}`;
    }

    // ...
}

Upvotes: 1

Views: 157

Answers (2)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

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

Upvotes: 2

valu
valu

Reputation: 1196

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"})

Upvotes: 0

Related Questions