Meteorjs - Passing data context to Template Rendered function?

help
#1

I have these data context and I want to use JQuery to set the selected value in the tag based on the value.

I am having problem passing the return data from the helpers into the Template.Rendered function.

is there any way of doing that?

Helpers

Template.studentSetting.helpers({
  values: function(){
    return Basics.findOne({userId:Meteor.userId()});
  }
});

Rendered function

Template.studentSetting.rendered = function(){
 //I want to use the "values" helper data here and perform some jquery code based on that?? 
}
#2

All you can do is move code from your helper to top-level function and use this function twice, in your helper and in your rendered callback. Like this

function myFunc(){
    return Basics.findOne({userId:Meteor.userId()});
  }
Template.studentSetting.helpers({
  values: myFunc()
  }
});
Template.studentSetting.rendered = function(){
   myFunc()
}
1 Like
#3

and btw, it is onRendered in current meteor version

#4

Probably slightly better to not have the function totally global?

Template.studentSetting.myFunc = function () { ... }

Template.studentSetting.onRendered(function () {
  this.myFunc();
});
1 Like
#5

@ffxsam wondering if this has changed at all as I’m using Meteor 1.2.1 My wrinkle is that I’m trying to access a reactiveVar. Any ideas? Also tried calling a helper to no avail. Haven’t tried a Session var, but would like not to. Guess I just need an extra set of eyes. Thanks.

Template.emailView.created = function(){
    this.replyToName = new ReactiveVar(); // gets set in an event prior to func in onRendered or custom func; 
    // also try to declare a default within the `new ReativeVar('hello')` to no avail
    // even if this is set explicitly, the same errors are thrown in the console
    this.replyToName.set('hello'); 

};

Template.emailView.replyToNameGetter = function(template){
    // obviously I only allow one of the following to be 'live' at one time
    return Template.instance().replyToName.get(); // Cannot read property 'replyToName' of null
    return replyToName.get(); // replyToName is not defined
    return template.replyToName.get(); // Cannot read property 'replyToName' of undefined
    return replyToName; // replyToName is not defined
};

Template.emailView.onRendered(function(){
  $('#mail-box-reply').droppable({
      drop: function(event,ui){
         Template.instance().replyToName.get(); // Cannot read property 'replyToName' of null
         this.replyToName.get(); // Cannot read property 'get' of undefined
         template.replyToName.get(); // template is not defined
         // then I add template into the function, tried both:
         // Template.emailView.onRenedered(function(template){
         // results in: Cannot read property 'replyToName' of undefined
         // tried instead drop: function(event,ui,template){
         //  results in: Cannot read property 'replyToName' of undefined
         // and of course both places
         // results in: Cannot read property 'replyToName' of undefined
         // but if I call a template function, it will be run, but it has to be in this full call
         Template.emailView.replyToNameGetter(); // won't work if any other variation like just replyToNameGetter();
          
      }
};
#6

So, I’ve boiled your code sample down to the essentials (while retaining your replyToNameGetter function). I can’t actually see what that function does in the context of a drop callback :confused:. In any event I get this code:

Template.emailView.onCreated(function() {
  this.replyToName = new ReactiveVar('hello');
  this.replyToNameGetter = () => { // don't understand why you need this
    return this.replyToName.get();
  };
});

Template.emailView.onRendered(function() {
  var instance = this;
  $('#mail-box-reply').droppable({
    drop: function(event, ui) {
      instance.replyToNameGetter(); // equivalent to instance.replyToName.get()
    }
  });
});
1 Like
#7

@robfallows Rock on. Thank you.
The only reason replyToNameGetter was in the code, I was just trying ways to successfully access the reactiveVar replyToName, but I do need that variable when the element is ‘dropped’ as defined by jquery-ui. Hope that answers your Q.

I played around with your code, and the key to successfully accessing the the reactiveVar from within the drop is the scope of this. I had tried this.replyToName.get() within the drop but it was returning "Cannot read property of ‘get’ of undefined.

You put instance = this within the onRendered but outside of the drop thus, I presume, carrying the scope of this down into the drop. (That’s how I’m reading it).

Again thanks for your help,
Dobb

1 Like
#8

If you are subscribing within the same template, you can just pass the subscription handler to the template instance. Then you can put an autorun in the on rendered callback and put your initializer wrapped in an if statement checking if handler.ready() is true inside the autorun :wink: