Can't update UI with reactivevar

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()); 
   }, 1000); 

  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?

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.


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?

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 in the onCreated function.