Meteor.js - Calling a template helper within template rendered

Question

I'm using Meteor 1.0.

I have a Template.*name*.rendered function that makes a number of calculations. At the end of the calculations, I would like the output to make its way into a Template.*name*.helpers so I can use it in the corresponding html page.

Here's a simplified version of the code:

Template.myTemplate.rendered = function () {

  var x = Math.random();

  Template.otherTemplate.helpers({
    randomNum: x
  });

}

When I call {{randomNum}} in otherTemplate, nothing happens.

I have also tried putting the Template.*name*.helpers outside of Template.*name*.rendered, in which case, I get the error:

Uncaught ReferenceError: x is not defined

Thoughts?

Answer 1

This isn't really the right way of going about things as the way Meteor works is by compiling templates before the application starts, rather than at run-time. Whilst something along these lines may be possible (for example by using Template.registerHelper), it would be much better to set a reactive variable to a specific value in the rendered callback and have the helper set to return that instead:

Session.setDefault('randomNum', 0);

Template.myTemplate.rendered = function () {
  Session.set('randomNum', Math.random());
}

Template.otherTemplate.helpers({
    randomNum: Session.get('randomNum')
});

If you'd rather use a private variable for the randomNum, have a look at ReactiveVar. It could be any reactive data source and it would work.

Answer 2

You used to create helpers as an object of the template but since Meteor has deprecated that you now have to create the helpers within the helper function.

Now in order to call the helper via javascript you must use this function

Template.*TemplateName*.__helpers.get('*HelperName*')(*Params*);

Its a pretty simple way of doing this and it keeps the functions out of the global scope so its pretty clean.

Here is an example of how I am using this

~~~

Template.home.events({
    'click .pair': function(event) {
        var _this = $(event.currentTarget);
        Template.home.__helpers.get('pairDevice')(_this);
    }
});

Template.home.helpers({
    'devices' : function() {
        return Session.get('devices');
    },
    'pairDevice' : function(elm) {
        elm.fadeOut();
        $('.home-page').addClass('paired');
        var deviceList = [
            {
                'name' : 'Patrick\'s Phone',
                'UUID' : '234123,4n123k4nc1l2k3n4 l1k23n4l12k3nc4l12'
            },
            {
                'name' : 'Mike\'s Phone',
                'UUID' : '734k23k4l2k34l2k34l2k34l2k3m'
            },
            {
                'name' : 'Edgar\'s Phone',
                'UUID' : '567k56l7k4l56k7l5k46l74k56l74k5'
            }
        ];
        Session.set('devices', deviceList);
    }
});

~~~