How to react programmatically on a change of a template's data?

help
1

I set up a page preloader template that shall show a spinner until all data is available. This is how I call it:

{{> pagePreloader wait=wait}}

The wait on the right hand side is set by a helper inside the surrounding template. It is true until all data has been retrieved.

Inside the pagePreloader template, I want to react on the change of this wait parameter. It works, if I am using an {{#if wait}} to display or hide something like this:

{{#if wait}}
Waiting...
{{/if}}

but I cannot find a way to programmatically react on the change, e.g. in an autorun() set-up in the onRendered() method.

I have tried this:

Template.pagePreloader.onRendered(function() {
  var instance = this;
  instance.autorun(function() {
    console.log(instance.data.wait);
  });
};

Yet the auto-run will only run once. As documented in the Meteor docs, instance.data is not a reactive data source – although the wait parameter inside {{#if wait}}) is.

So I am wondering how I can react on the parameter change then? Using an {{#if}} is not an option, since I want to slowly fade-out the spinner.

Maybe something like this would work:

{{#unless wait}}
{{toggle}}
{{/unless}}

but I’m quite sure there must be a more elegant way to do this…

2

If I am using this.wait in helper, it is re-calculating when the value changes.
But I am not sure what is correct scope from onCreated.