How to display variables declared in template event

Hello, on a web app I am making, I am taking values from input fields (range and date) and then doing calculations and want to display some results.

I know my calculations and inputs are all fine because if I log it out to the console it displays the correct numbers, however I am unclear how to display this on the page.

if it is was in a helper function then I would just bind it like {{test}} correct? but what do I do if the variables are made in response to an event such as:

Template.ccinfo.events({   
    'input input[type=range]': function(event){
     ...
     numDisplay= x * y * z;

Thank you!

Use a ReactiveVar. For example:

Template.ccinfo.onCreated(function() {
  this.answer = new ReactiveVar();
});

Template.ccinfo.helpers({
  showResults() {
    const templateInstance = Template.instance();
    return templateInstance.answer.get();
  }
});

Template.ccinfo.events({   
  'input input[type=range]'(event, templateInstance) {
   ...
   numDisplay= x * y * z;
   templateInstance.answer.set(numDisplay);
});

Don’t forget to meteor add reactive-var to your app.

1 Like

Hi there, thank you for your help!

I added reactive-var and put in the code that you gave.

However this gives me the following error in the console

Uncaught ReferenceError: templateInstance is not defined

This reference error refers to the line in the events where templateInstance is set. This happens even if I remove the “const” and put templateInstance as a global

Could you post your actual code? You are doing something different than above.

Sure, my code is

Template.ccinfo.onCreated(function () {
    this.answer = new ReactiveVar();
});

Template.ccinfo.helpers({
    showResults() {
        templateInstance = Template.instance();
        return templateInstance.answer.get();
    }
});

Template.ccinfo.events({

    'input input[type=range]': function (event) {
        numSpeeches = event.currentTarget.value
        numSpeechesleft = 10 - numSpeeches;
        Session.set('sliderValueIs', numSpeeches)
            //The Session var will be set as you drag the slider across its range of values.
            //later, you can get this session and return it in a helper to display on your page
    },
    'submit #dates': function (event) {
        event.preventDefault();
        let joinDate = $('.joinCC').val();
        let finDate = $('.finishCC').val();
        let [joinYear, joinMonth, joinDay] = joinDate.split('-');
        let [finYear, finMonth, finDay] = finDate.split('-');
        let finishDateFormat = new Date(finDate)
        let joinDateFormat = new Date(joinDate);
        let now = new Date();

        function diff(past, future) {
            return (future - past) / (1000 * 60 * 60 * 24);
        }

        function speechRate(numLeft, time) {
            return parseInt(time / numLeft);
        }

        let nowDays = diff(joinDateFormat, finishDateFormat)
        let goalDays = diff(now, finishDateFormat);
        let finalGoalDate = speechRate(numSpeechesleft, goalDays);
        let currentRate = speechRate(numSpeeches, nowDays) * numSpeechesleft;
        console.log("To finish your CC by your goal date you will have to do a speech every " + finalGoalDate + " days");

        console.log("At your current rate you will finish your CC in " + currentRate + " days");

        templateInstance.answer.set(currentRate);
    }

});

You are missing the second param to the second event:

'submit #dates': function (event, templateInstance) {

1 Like

Arg, another silly mistake :stuck_out_tongue:

Thank you!

sidenote: use eslint on your editor. That will help with issues like these. Also you are missing a lot of variable declarations. (const or let). It’s best to always use const if you introduce a new variable.

1 Like