SOLVED Execute callback after reactive updates take place

help
1

I’m looking for a way to execute a callback after reactive updates have taken place in a template.

the scenario:
I’m using a session variable to toggle the visibility of some charts. A CSS class is added through a template helper to show or hide the div container when the user selects a sensor.

<div id="chart1" {{class "Sensor 1"}}></div>
<div id="chart2" {{class "Sensor 2"}}></div>

When a chart becomes visible it is necessary to recompute the layout and get the chart to “reflow()” into the available space. Using HighCharts this is a common issue.

The problem is that when the template event handler triggers it executes before the chart is visible. So calling chart.reflow() does not work.

I have been able to make this work by forcing the code to execute asynchronously using a setTimeout (see code below), but I am wondering if there is a better approach.

Meteor.setTimeout(function(){
  //this runs once call stack is cleared
  chart.reflow();
},0)
2

Looks like the proper way is Tracker.afterFlush() instead of Meteor.setTimeout().