CODEWITHSUNDEEP
templateseventsmeteor
hujhax
hujhax

Reputation: 97

Meteor: detecting an event in a nested template

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?)

Upvotes: 3

Views: 513

Answers (2)

hujhax
hujhax

Reputation: 97

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

Upvotes: 2

Paul
Paul

Reputation: 27483

Note: The answer below will get you a working toggle button, and a single shared toggle status. If you need the button to do different things, or change different toggle booleans, depending on the context, then there is more work to do. It is probably possible.

The nesting used in display does not affect the internal representation of the Templates. All the templates in Meteor get defined in a Template object as Template.someTemplateName. Each template is a JS object containing data fields, functions, and event handlers.

For this reason, dashes in template names are forbidden.

Since meteor uses the template name in a Javascript object as a property name, therefore template names must follow Javascript naming conventions/restrictions. In particular, dash looks like a minus in the resulting code:

Template.fancy-button.events

and won't work. Javascript reads that as Template.fancy minus button.events, not as the events handler for the fancy-button template.

As for Javascript-compatible names, http://javascript.crockford.com/code.html suggests:

Names should be formed from the 26 upper and lower case letters (A .. Z, a .. z), the 10 digits (0 .. 9), and _ (underbar)...

Another Javascript convention is camelCase, where every word in a name after the first word is given a capital letter. I suggest this instead of dash to change your code as follows:

<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}}
    // here, I want the button to bring up my "stats" page (go, iron-router, go)
    {{ #if veryFancyStatus }}
    {{ > statsPage }}
    {{ /if }} 
</template>

<template name="statsPage">
    {{> fancyButton}}
    // here, I want the button to show an alert page
    {{ #if veryFancyStatus }}
    {{ > alertPage }}
    {{ /if }}
</template>

The Meteor way to set a click handler is to use event maps

Also, you probably want to be use a helper to make it easier to use session variables in a template

Here is how to implement a toggle:

client.js (untested)

// initialize veryFancyStatus to 0
Session.set("veryFancyStatus",0)
// register veryFancyStatus so we can read it in every template
Handlebars.registerHelper('veryFancyStatus',function(input){
  return Session.get("veryFancyStatus");
});
// set up an event handler so that any time a .veryFancy class element is clicked
// a function is called to toggle the session variable veryFancyStatus
// this should also trigger redraws in templates that are conditional on veryFancyStatus
Template.fancyButton.events({
  'click .veryFancy': function () {
    Session.set("veryFancyStatus", +(!(Session.get("veryFancyStatus")));
  }
});

Upvotes: 1

Related Questions