Use template helpers to make text reactive in a Meteor template

Question

I have a function:

function Print(string, number) {

        if (number == 1) { // For descriptions
            currentdesc = string;
        } 
        else if (number == 2) { // For the first choice
            currentchoice1 = string;
        } 
        else if (number == 3) { // For the second choice
            currentchoice2 = string;
        }
}

And some templates that use these values to display them on the page:

if (Meteor.isClient) {
            Template.main.desc = currentdesc;

            Template.below.choice1 = currentchoice1;

            Template.below.choice2 = currentchoice2;
}

And the HTML part of them is:

<template name="main">
  <h2>Current:</h2>
  {{desc}}

</template>

<template name="below">
  <h3>Choose:</h3>
  {{choice1}}
  <br/>
  {{choice2}}
  <br/>
    <div>
    <input id="number" type="text" size="40">
    <input type="button" class="choose" Value="choice">
    </div>
</template>

When I call the function for the first time it displays what I need correctly. After that, whenever I call that function again, the text on the page remains the same, no matter what I do. The variables currentdesc, currentchoice1 and currentchoice2 change accordingly as expected, but the templates don't update.

Answer 1

Use Session to make variables reactive:

function Print(string, number) {

    if (number == 1) { // For descriptions
        Session.set('currentdesc', string);
    } 
    else if (number == 2) { // For the first choice
        Session.set('currentchoice1', string);
    } 
    else if (number == 3) { // For the second choice
        Session.set('currentchoice2', string);
    }
}

And your template:

if (Meteor.isClient) {
        Template.main.desc = function() {
            return Session.get('currentdesc');
        }
        Template.below.choice1 = function() {
            return Session.get('currentchoice1');
        }
        Template.below.choice2 = function() { 
            return Session.get('currentchoice2');
        }
}

There are also a couple more examples on how to use Session with Meteor's documentation: http://docs.meteor.com/#session

Answer 2

I'm pretty new at Meteor, but I think you need to set up a template helper.

Template.below.helpers ({
  choice1: function () {
    return currentchoice1;
   }
}),

That makes choice1 reactive.

Bob