Can't update UI with reactivevar

#1 
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
import './main.html';

EmployeeStatus = new Mongo.Collection("empl_status");
var clock = new ReactiveVar(new Date());

Template.dateHeader.onCreated(function() { 
this.clock = new ReactiveVar(new Date()); 
Meteor.setInterval(()=> { 
    this.clock.set(new Date()); 
    console.log(this.clock.get()); 
   }, 1000); 
})

Template.dateHeader.helpers({
  formattedDate: function() {
    return clock.get();
  }
});

Console shows proper time ticking every second, but the page remains static with the time of the original page load.

What am I doing wrong here?

#2

You have defined two different variables, clock and this.clock. You’re then updating this.clock, but getting the value from clock.

This.clock is part of the template object, while clock is a loose variable in the scope of the .js file.

2 Likes
#3

Thanks herteby!

As far as using moment in this process, is that doable?

I would assume I could use the moment call where I’m returning the clock value in the helper… or is that an incorrect assumption?

#4

Yeah, you can either do moment(clock.get()) or clock.set(moment()), either works.

Oh btw I forgot, this in template helpers actually refers to this.data in the onCreated function.