How to make a function that uses counters to compute values reactively

Question

I'm new to meteor and I tried to use the tmeasday:publish-counts package to publish some counts. Reactivity works fine out of the box when I just read the counts, but when I use the counts in a Template.helper function, the function doesn't get updated when the counts change.

Here is what I have :

• On the server :

  Meteor.publish('counters', function() {
      Counts.publish(this, 'searches-thisWeek', UserActions.find({
          $and: [
              { action: SEARCHES_REGEX },
              { date : { $gte : moment().startOf('week').toDate()} },
              { date : { $lt : moment().toDate()} }
          ]
      }));
  
      Counts.publish(this, 'searches-lastWeek', UserActions.find({
          $and: [
              { action: SEARCHES_REGEX },
              { date : { $gte :  moment().subtract(1, 'week').startOf('week').toDate()} },
              { date : { $lt :  moment().subtract(1, 'week').endOf('week').toDate()} }
          ]
      }));
  });
  

• On the client :

  Template.dashboard.helpers({
      nbSearchesThisWeek : function() {
          var variation = Counts.get('searches-thisWeek') - Counts.get('searches-lastWeek');
          return {
              currentValue : Counts.get('searches-thisWeek'),
              orientation : {
                  sign: (variation > 0) ? '+' : '',
                  class: (variation > 0) ? 'up' : 'down'
              },
              variation : variation
          };
      }
  });
  

• In my template I have a :

  <td>{{getPublishedCount 'searches'}}</td>
  <td>{{#with nbSearchesThisWeek}}{{>variations }}{{/with}}</td>
  

• It uses this subtemplate :

  <template name="variations">
      <div class="variation col-lg-12">
          <span class="variationValue {{orientation.class}} col-lg-6">{{orientation.sign}}{{variation}}</span>
          <span class="currentValue col-lg-6">{{currentValue}}</span>
      </div>
  </template>
  

  The {{getPublishedCount 'searches'}} updates fine. It just gets my "searches" counter and updates anytime the counter changes.

However, the counters in the subtemplate execute fine at startup but never update when any of the dependent counters change.

So my question is, how and where do I make my nbSearchesThisWeek helper react to the changes on the dependent counters values ? I'm very confused when I read the documentation about Deps, Tracking, and ReactiveVars... I didn't really understand where those things should be used to make my use case work...

Thanks for your help.

Philippe

Answer 1

I have created a MeteorPad with code which is as far as possible the same as yours and it is all reactive, without any changes to your code.

Please note that instead of trying to recreate your UserActions collection, I have created two separate collections, UserActions and Players (the names have no significance) to create two counters just like yours. I think once you have seen the code you will agree that for the purpose of checking your code it will do.

Go to this page: http://app-cmrd2ous.meteorpad.com/ open the Chrome or Firefox console and insert the following two records and watch the counters:

UserActions.insert({name: 'bloggs', date: new Date()});
Players.insert({name: 'bloggs again', date: new Date()});

The counters are all reactive.

The meteorpad is here: http://meteorpad.com/pad/n4GwwtPesEZ9rTSuq/Dashboard

All I can suggest is that you look at where I have put the code (whether on the client or the server) - maybe that has something to do with it.

But maybe more likely is that you were running the wrong tests. In other words perhaps you got your dates wrong - you thought you were inserting a record with a date for last week, whereas actually it was two weeks ago or something like that.