Change value of reactive variable in hook in Meteor

Question

I have

Template.templateName.onCreated(function() {
  this.variableName = new ReactiveVar;
  this.variableName.set(true);
});

and in templateName I have an autoform. I need to set the reactive variable variableName to false when the autoform is submitted.

I have tried

AutoForm.hooks({
  myForm: {
    onSuccess: function(operation, result) {
      this.variableName.set(false);
    },
  }
});

but it doesn't work since this. does not refer to the template templateName as it does in helpers and events. It would have worked if I used sessions instead since these are not limited/scoped to specific templates.

What can I do to change the reactive variable in an autoform hook?

I have also tried

AutoForm.hooks({
  myForm: {
    onSuccess: function(operation, result) {
      this.template.variableName.set(false);
      this.template.parent.variableName.set(false);
      this.template.parent().variableName.set(false);
      this.template.parentData.variableName.set(false);
      this.template.parentData().variableName.set(false);
      this.template.parentView.variableName.set(false);
      this.template.parentView().variableName.set(false);
    },
  }
});

When using console.log(this.template) it does print an object. If I use console.log(this.template.data) I get

Object {id: "myForm", collection: "Meteor.users", type: "update", doc: Object, validation: "submitThenKeyup"…}

I use the reactive variable variableName to determine whether to either show the editable form or the nice presentation of data for the user. Maybe there is another better way to do this.

Servia

I faced with same scenario but i solved it using Session and autorun. And onDestroyed of that template i make the Session as null... Waiting to know any other better way to do solve this... Thumps Up! – Ariana

@Jamgreen, is the Template.templateName.onCreated and AutoForm.hooks codes on the same file? – Oxen

Have you tried using Template.instance().variableName inside your hook? – Superfecundation

Also console.log(Template.instance()); prints null. – Servia

Answer 1

Edit of onCreated:

Template.templateName.onCreated(function() {
  this.variableName = new ReactiveVar(false);
});

You may want to add a helper function to grab the Template instance:

Template.templateName.helpers({
    getVariableName: function() {
      return Template.instance().variableName.get();
    }
});

and then you could potentially call within your form logic

AutoForm.hooks({
  myForm: {
    onSuccess: function(operation, result) {
      Template.getVariableName.set(false);
    },
  }
});

The MeteorChef has a great article about reactive variables/dictionaries Reactive Variables.

Tillio

Answer 2

If people stumble upon this for a solution, based this thread I as able to access the parents Reactive Dict/Reactive Variable after installing aldeed:template-extension like so

AutoForm.hooks({                                                                                                                         
  postFormId: {
    //onSuccess hook of my post form
    onSuccess: function(formType, result) {
      this.template.parent().reactiveDictVariable.set('imgId', 'newValueSetOnSuccess');
      //Or reactive var, and depending on your hierarchy
      //this.template.parent().parent().yourReactiveVar.set(undefined);
    }   
  }
});

Here is Html and JS for reference.

<template name="postsTemplate"> 
  {{#autoForm schema=postFormSchema id="postFormId" type="method" meteormethod="addPost"}}
   <!-- other autoform stuff -->
   This is reactive variable used in template -- {{imgId}}
  {{/autoForm}}
</template>


Template.postsTemplate.created = function() { 
  //Using reactive-dict package here                                                                                                   
  this.reactiveDictVariable = new ReactiveDict();
  this.reactiveDictVariable.set('imgId', undefined);
};

Template.posts.events(
  "change .some-class": function(event, template) {
   //other stuff
   template.postImgState.set('imgId', 'something');
}

Lophobranch