Meteor pass value from modal click event to parent template

Question

I am trying to make a re-useable confirm modal in Meteor. I have the modal working in the sense it opens and displays the content. The idea is I can use this anywhere and it will return a value if the user clicks confirm then I can run any server side method I choose. The confirm template js is simple and looks like this:

Template.confirm.events({
  'click .confirm': function() {
    // I want to let the template that opened the modal know the user has confirmed. How do I pass this information?
  },
  'click .cancel': function() {
    //Close the modal
  }
});

I know there are solutions e.g sweet alerts but I am using Zurb Foundation for my UI and want to keep everything within this framework for consistency and control. Can anyone help point me in the right direction?

Many thanks in advance.

Answer 1

There's no standard way to go about this, but I'd suggest passing the modal a reactiveVar that you observe outside the modal and trigger your server-side method when the reactiveVar changes to the value you want. Some skeleton code might look like:

html

{{> confirm triggerVar=myReactiveVar}}

modal js

Template.confirm.events({
  'click .confirm': function() {
    this.triggerVar.set(true);
  },
  'click .cancel': function() {
    this.triggerVar.set(false);
  }
});

in your controller js

Template.someTemplate.onCreated(function() {
  this.myReactiveVar = new ReactiveVar();
})

Template.someTemplate.onRendered(function() {
    // observe changes on your fancy reactiveVar
    this.autorun(() => {
        if (this.myReactiveVar.get() === true) {
            // fire whatever server-side action you want
        }
    })
})