Meteor: detecting an event in a nested template

Question

Newbie meteor question...

I've got code vaguely similar to this:

<template name="fancy-button">
    <p>This is a fancy button that I use in several places!</p>
    <input type="button" class="very-fancy" value="Click Me!" />
</template>

<template name="homepage">
    {{> fancy-button}}
    // here, I want the button to bring up my "stats" page (go, iron-router, go)
</template>

<template name="stats-page">
    {{> fancy-button}}
    // here, I want the button to show an alert
</template>

Question: in "homepage" and "stats-page", is there any way to know if a user has clicked the button in "fancy-button"?

(Or is this just the wrong way to implement things in meteor?)

Answer 1

Thanks so much, @paul! I went with something like this:

<template name="fancyButton">
    <p>This is a fancy button that I use in several places!</p>
    <input type="button" class="veryFancy" value="Click Me!" />
</template>

<template name="homePage">
    {{> fancyButton}}
    {{respondToFancyButton}}
    <!-- here, I want the button to bring up my "stats" page (go, iron-router, go) -->
</template>

<template name="statsPage">
    {{> fancyButton}}
    {{respondToFancyButton}}
    <!-- here, I want the button to show an alert -->
</template>

Then, in my JavaScript client code:

Session.set("fancyButtonMonitor", 0);

Template.fancyButton.events({
    'click .veryFancy': function(theEvent, theTemplate) {
        Session.set("fancyButtonMonitor", 1);
    }
});

Template.homepage.respondToFancyButton = function () {
    if (Session.get("fancyButtonMonitor") == 1) {
        Session.set("fancyButtonMonitor", 0);
        Router.go('stats');
    }
    return null;
};

Template.statsPage.respondToFancyButton = function () {
    if (Session.get("fancyButtonMonitor") == 1) {
        Session.set("fancyButtonMonitor", 0);
        Router.go('alert');
    }
    return null;
};