Reactively call a js function/event with meteor.js

Question

I'm new to meteor.js. Still getting used to it. I get how templates update reactively according to the cursor updates on the server, like this:

 {{#if waitingforsomething.length}} Something Happened! {{/if}}

This is good to display elements on the page, updating lists and content. Now, my question is: what if I want to call some javascript or fire some event when something gets updated reactively? What would be the right way to do it with meteor.js?

Answer 1

Anything inside Tracker.autorun or template instance this.autorun runs with changes in reactive data sources inside these autoruns.

Reactive data sources are ReactiveVar instances, db queries, Session variables, etc.

Template.myTemplate.onCreated(function() {

  // Let's define some reactive data source
  this.reactive = new ReactiveVar(0);

  // And put it inside this.autorun
  this.autorun(() => console.log(this.reactive.get()));
});

Template.myTemplate.events({
  // Now whenever you click we assign new value
  // to our reactive var and this fires
  // our console.log
  'click'(event, template) {
    let inc = template.reactive.get() + 1;
    template.reactive.set(inc);
  }
});