Setting a reactive var from outside of a template

help
1

In the client I call a Method on the backend. I want to show the results of it in a popup on the client. I have read that the best way in Meteor to do this is by using a reactive var.

But I have problems with setting the reactive var. All the examples I’ve seen were showing of setting the reactive var inside Template.xxx.events structure. I could restructurize my code to achive that, but can I just set the reactive var from a normal function?

Something like that:

someMyFunction = function()
{
Meteor.call('functionOnBackend', myParams, function(error, result) 
 {        
 Template.myTemplateName.MyReactiveVarName.set(result);
});     
}
2

Hi,

it’s not easy to give good advice based on your relatively vague explanation of what you’re doing exactly.

But from my point of view, using a “reactive var” in this situation might actually not be the best way.

I’d implement the popup so it could receive some data as arguments for the rendered template inside it. I’m sure if you look on atmosphere you could find some examples or actual implementations you could use.

Then I’d probably open the “popup”, however you implement it, from inside the result callback of the method call (where you now have the reactiveVar.set() call). Why not open it from there and pass the data through at the same time? Then you don’t have to open a popup first and then push the data through another channel, in that case a reactive var.

If you want to go the reactive var route, The way I’d do it is thus:

  • in the eg. myPopupTemplate.js file containing the template-code (helpers, events etc) for your popup-template, I’d export a reactive var, eg:

(Note: I’ve used this forever, so I am not sure, maybe you need to add the ReactiveVar - package to your project, have a look at atmosphere, again, please)

export const popupData = new ReactiveVar()

(you can add a default value in the () brackets if you like)

Then you can import this reactiveVar from your file with the method call like this:

import { popupData } from '/path/to/myPopupTemplate.js'

And then you could add a template helper to your myPopupTemplate.js:

Template.myPopupTemplate.helpers({
    getPopupData() {
         return popupData.get()
    }
})

-> And then you’d have a cool reactive template helper.

But I think this isn’t actually the best way, because you’d need to trigger the opening and closing of the popup as well etc.

2 Likes
3

For simple use-cases, you might consider using Session which is essentially a global dictionary of reactive variables.

To answer your original question, it’s difficult to get to template instances which is where this points in various template events. Your attempt Template.myTemplateName.MyReactiveVarName accesses the template, but not the template instance. I imagine you could use that, if you only want one variable for all instances of the template, but then you should always refer to the variable as Template.myTemplateName.MyReactiveVarName not this.MyReactiveVarName (and create it at the global level, not within template creation).