Recursive scheduleDirtyCheck calls

1

I’m getting a recursive stack trace at https://github.com/will-moore/omero-idr-ui/blob/a13eecffcd953b940a97c5645535b75dc6eac408/src/app/search.js#L42
that starts like this and I’m wondering if there’s a common cause for this

stack trace:

   get (search.js?04d8:45)
   evaluate (aurelia-binding.js?5f98:1386)
   call (aurelia-binding.js?5f98:4956)
   callSubscribers (aurelia-binding.js?5f98:328)
   call (aurelia-binding.js?5f98:3658)
   check (aurelia-binding.js?5f98:3625)
   (anonymous) (aurelia-binding.js?5f98:3613)
   setTimeout (async)
   scheduleDirtyCheck (aurelia-binding.js?5f98:3612)
   check (aurelia-binding.js?5f98:3630)
   (anonymous) (aurelia-binding.js?5f98:3613)
   setTimeout (async)
   scheduleDirtyCheck (aurelia-binding.js?5f98:3612)
   check (aurelia-binding.js?5f98:3630)
   (anonymous) (aurelia-binding.js?5f98:3613)
   setTimeout (async)
   scheduleDirtyCheck (aurelia-binding.js?5f98:3612)
   check (aurelia-binding.js?5f98:3630)
   (anonymous) (aurelia-binding.js?5f98:3613)
   setTimeout (async)
   scheduleDirtyCheck (aurelia-binding.js?5f98:3612)
  etc...

Many thanks,

Will.

1 Like
2

That needs a computerfrom or turned into a function that accepts the two Params in the view.

2 Likes
3

By default Aurelia will dirty check getter properties (every 120ms I think). You can get around this by using the @computedFrom decorator that takes a variable number of arguments that aurelia then watches for changes. If those underlying properties change then the getter is called again. This way you getter is only called when it’s dependencies are updated.

Your getter is dependent on the values in searchkey and searchvalue, so you can add a decorator like this
```
@computedFrom(‘searchkey’, ‘searchvalue’)
get filteredStudies() {
// if (this.searchkey && this.searchvalue) {
let query = ${ this.searchkey }:${ this.searchvalue };
console.log(query);
return this.context.studiesModel.filterStudiesByMapQuery(query);
// }
}
}


One thing to note is that dirty checking is fine to use in a lot of cases, unless you have a very busy form, or are making expensive API calls etc.

Another thing you could do would be to change your getter to a method and just call that from the template i.e. change getter to getFIlteredStudies method and change template
`<li repeat.for="study of getFilteredStudies()">`
1 Like
4

You can also try this plugin https://github.com/bigopon/aurelia-deep-computed

it’s a drop in replacement for @computedFrom, with extra feature: shallow/deep observe the result of computed expression.

The different is:

  • @computedFrom('a.b'): observe expression path a.b and notify change whenever the value of that expression got changed
  • @deepComputedFrom('a.b')/@shallowComputedFrom('a.b'): observe expression path a.b and also deeply/shallowly observe the value of that expression