MeteorJS - force redraw of templates

Question

My Meteor app displays list of users and for each user it shows

a small chart showing the user's score over time
the most recent score

Since users have different types of scores (e.g. score1, score2, score3), I allow a set of radio buttons to choose which score to display.

The chart is drawn using a jQuery sparkline plugin and it's drawn in the "rendered" function

Template.listItem.rendered = function() {
  console.log("rendered");

  arr = createChartArray(this.data, currentScoreType); // gets the array of scores for the current score type
  $(this.find(".itemBodyLeft")).sparkline(arr, {
    width:60,
    height:35,
    lineColor:"#FF2F00",
    fillColor:"#fff0dc"
  });
};

I am using IronRouter and since there are many users, I limit the user list to 10 and I sort the users by whatever the score-type that was selected in a descending order.

So you can view the radio button as selecting "order by" condition.

Now each time I select different radio button, it looks like existing template does not get refreshed (is Meteor 're-using' the existing template, since it's already there?).

When I run my app the first time, I can see "rendered" being printed out 10 times. But if I select a different score type, I can now only see 6 "rendered" messages and that's because 4 of the templates were already there. So the chart is not being updated.

How do I force the template to be re-rendered? Or is there a better way of doing this?

Geoffrey Booth Geoffrey Booth · Accepted Answer · 2014-09-13T21:01:33

There’s no function to call to force a re-render. Templates re-render automatically when their dependencies change. So in order to get listItem to re-render, it needs to depend on a reactive resource.

This would be easiest by dropping in a Session variable. For example, say you stored currentScoreType as a session variable. Then change your fourth line to:

arr = createChartArray(this.data, Session.get("currentScoreType"));

You can also look into using Tracker.autorun, which could achieve the same result without declaring global session variables.

MeteorJS - force redraw of templates

1 Answers