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?

See also [Calling template helpers from JS code](http://stackoverflow.com/questions/32042886/how-do-you-call-a-meteor-template-helper-from-the-console-or-other-js-code). — Dan Dascalescu, Aug 27 '15 at 21:54

score 5 · Accepted Answer · answered Nov 18 '14 at 15:14

5

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.

answered Nov 18 '14 at 15:14

richsilv

7,993
1
23
29

That makes way more sense! Thanks. The session variable is the way to go. – samcorcos Nov 18 '14 at 21:23
thats the way i do too, but it seems to me that this is not "right way" to work, but i don't know another better way. Meteor is kinda cloudy in workflow, if someone see this and know something better, give some props! – Julio Marins Jan 27 '15 at 15:04
It's certainly better to attach the results to the template instance (so `this.randomNum = new ReactiveVar(...);`), after which I think that seems like a pretty solid workflow. The only alternative is using something like iron-router's *waitOn*, so that you know the calculations are complete before the page even renders. There's no getting away from asynchronicity! – richsilv Jan 27 '15 at 15:08

score 1 · Answer 2 · answered Mar 25 '15 at 23:08

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);
    }
});

~~~

Meteor.js - Calling a template helper within template rendered

2 Answers2

Linked