Best way to share event handlers for multiple templates?

help
1

What is the best way to share event handlers in Meteor?

Is it by having one big template that wraps over the template? Or is it by creating a JS class and grabbing the event handler from tehre?

i.e.
Option 1

<template name="wrap">
  {{>tmpl1}}
</template>
<template name="wrap">
  {{>tmpl2}}
</template>

and then put events in template “wrap”

or…

Option2

Template.tmpl1.events({
  event1: function(e,t){ some_class.event1(e,t) }
})
Template.tmpl2.events({
  event1: function(e,t){ some_class.event1(e,t) }
})

some_class has the events and templates just call from them

Which of these two is the best way? And is there a better way than this?

2

@ashah888 I came across this solution by someone a long time ago… hope it helps.

<template name="wrap">
  {{>tmpl1}}
  {{>tmpl2}}
</template>

<template name="tmpl1">
  <button>Click Me</button>
</template>

<template name="tmpl2">
  <button>Click Me</button>
</template>


  var events = {
    'click button': function(event) {
      console.log('button clicked from : ' + Template.instance().view.name.split('.')[1]);
    }
  };

  Template.tmpl1.events(events);
  Template.tmpl2.events(events);
1 Like
3

You could also try Blaze Components to do that as well. It works quite differently though.

4

can do that with helpers too

var activityHelpers = {
    boardLabel: function() {
        return TAPi18n.__('this-board');
    },
    cardLabel: function() {
        return TAPi18n.__('this-card');
    },
    cardLink: function() {
        var card = this.card();
        return Blaze.toHTML(HTML.A({
            href: card.absoluteUrl(),
            "class": "action-card"
        }, card.title));
    },
    memberLink: function() {
        return Blaze.toHTMLWithData(Template.memberName, {
            user: this.member()
        });
    },
    attachmentLink: function() {
        var attachment = this.attachment();
        return Blaze.toHTML(HTML.A({
            href: attachment.url(),
            "class": "js-open-attachment-viewer"
        }, attachment.name()));
    }
};

Template.activities.helpers(activityHelpers);
Template.cardActivities.helpers(activityHelpers);

source: libreboard. Some well-organized and clean code in that project. Good examples to follow!

2 Likes
5

The parent template solution seems more manageable:

See here