Getter vs. custom @computedFrom for "dirty" checking?

Best Practices
1

I typically have a “domain” object that I’m binding to a form for editing. The object may have 10 properties or more.

The easiest thing I’ve found to do for “dirty” checking is to do something like this.

activate(model){
    this.original = model;
    this.client = { ... model };
}

get isDirty() : boolean {
     return JSON.stringify(this.original) != JSON.stringify(this.client);
}

reset() {
      this.client = { ... this.original };
}

However, my understanding is that isDirty() will now fire every 120 ms – which can affect performance. I know I can help that performance by adding @computedFrom to isDirty() but that gets cumbersome and also makes my code a bit brittle should I add a new property.

@computedFrom('client.firstName', 'client.lastName','client.middleName',...)

My other option is to extend computedFrom class to allow it to take an object and basically build a list of all the properties of the object – essentially doing what I would have to do above.

@computedFrom(client)

The downside of course is that there may be properties on the object that aren’t actually on the form. So, if the object has 30 properties but only 20 are edited on the form, then it seems like maybe a bunch of unnecessary observers will be created on those extra properties and I don’t know how that will affect performance either.

Will the custom @computedFrom give better performance even though there may be extra properties being observed, etc.? Is there a better way to do this all together? (I saw this example that only deals with the actual form, but there was no answer for undoing changes or resetting values).

1 Like
2

If this is a form, do you use the Aurelia-Validation Plugin? I believe you can subscribe to all the validation rules you create.

Otherwise your best shot is to use the binding engine to observe all properties and react to change, though you’ll want to make sure to properly dispose of subscriptions.

2 Likes