CODEWITHSUNDEEP
javascriptnode.jsmeteormeteor-autoform
Jamgreen
Jamgreen

Reputation: 11039

Change value of reactive variable in hook in Meteor

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.

Upvotes: 6

Views: 1442

Answers (2)

akotian
akotian

Reputation: 3935

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

Upvotes: 1

Zach Stoltz
Zach Stoltz

Reputation: 223

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.

Upvotes: 1

Related Questions