V2 custom decorators

1

I am trying to migration some v1 stuff to v2 and having some difficulty porting my custom decorator:

I have a list component with properties that are used to filter a list via an api, the state of the properties should be reflected in the browser url as queryparameters. In v1 I wrote a custom decorator that would override the set and get methods for the properties. It looked like this:

@filterParams() author;
@filterParams() genre;
@filterParams({type: 'boolean', default: 'false'}) published;

changing values in the UI of the component would be reflected in the URL

http://example.com/books?author=jack&genre=crime

If the page is loaded with queryparams the UI state is set from the queryparams.

My custom getter is working but when I change values in the UI I get the following error:

Uncaught Error: Trying to set value for property name in dirty checker

Are there any examples of how to build custom decorators that play nice with the Binding Engine and would avoid dirty checking?

2

@Sayan751 perhaps this is something you came across with your latest coarce deco?

3

my latest coarce deco?

edit: ahh… sorry, that was directed to @Sayan751 .

4

@aGustafson make sure to set the configurable flag to true in the property descriptor in your decorator. For any bound property in the value Aurelia observes the property so that any changes in the value of the property can be reflected back to UI. For that end Aurelia redefines the property descriptor so that the changes can be intercepted. But it can only do that if the property is configurable, otherwise it falls back to dirty checking.

@zewa666 The nature of the @coercer deco bit bit different.

5

That fixed it!
Thank you

1 Like