Pass options to Template Event

1

Hi!

I can automate the click of a button on a form with simple jQuery
i.e. $('#btnId').click();

This is then wired up to a Template Event. I.e.

Template.foo.events({
‘click #btnId’(e, template) {
console.log(‘you clicked the btn!’);
}
});

I’d like to pass in some options to the handler.
[jQuery's .click - pass parameters to user function - Stack Overflow](pass optn to onclick)

I’d like to be able to do something like the following though…

$('#btnId').click({foo:'bar'});
Template.foo.events({
  'click #btnId'(e, template) {
         const foo = params.foo;
         console.log(`you clicked the btn and its data is ${foo}`);
  }
});

However, passing in that Object as a param makes it so that the even doesn’t even get called! Strangely, there’s no console errors. I’m thinking it might have something to do with a Template Event.

2

First off, the jQuery click function requires to not just pass the parameters, but also an event handler

$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

Second, even though Blaze and jQuery do work together for certain things, event handling doesn’t seem to be part of that. What is it you actually want to do? Who/what issues the click event? Where are the parameters you want to add coming from?

In the Template.event handler you always have the event.currentTarget object

<template name="foo">
 <button 
  id="btnId" 
  data-some-id="A" 
  data-other-value=5
 >Click Me</button>
</template>

You can access all of the data values like so

Template.foo.events({
 'click #btnId'(event, template) {
   const data = event.currentTarget.dataset
   console.log(data.someId, data.otherValue)
 }
})
2 Likes
3

I want a template event handler of a parent template to click btn in a child template (thus executing the child template’s event handler) I want the params coming from the parent template’s event handler (it’s to make the child event handler execute another code path).

So something like

Template.parent.events({
 'click #parentBtn'(event, template) {
       $('#childBtn').click({pathB:true}); 
  }
});

Template.child.events({
 'click #childBtn'(event, template) {
       if (params.pathB) {
           executePathB();
       } else {
          executePathA();
       }
  }
});

I hope that clarifies

4

I think this use-case is going beyond how Meteor (Blaze) and jQuery work together. Meteor uses different patterns to communicate between parent and child templates. I would check out the blazejs documentation to get some ideas

1 Like