Skip to content

Instantly share code, notes, and snippets.

@Primigenus
Last active December 10, 2015 03:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Primigenus/4376780 to your computer and use it in GitHub Desktop.
Save Primigenus/4376780 to your computer and use it in GitHub Desktop.
An example illustrating how to get Meteor to show a menu only when a certain item is clicked. Used in the answer to this question on Stack Overflow: http://stackoverflow.com/questions/14034556/what-is-the-proper-way-to-manipulate-template-instance-in-meteor-framework
<head>
<title>Test</title>
</head>
<body>
{{> Restaurants}}
</body>
<template name="Restaurants">
<ul>
{{#each Restaurant}}
<li>
{{name}}
{{#if restaurantSelected}}
{{> menuItems}}
{{/if}}
</li>
{{/each}}
</ul>
</template>
<template name="menuItems">
<ul><li class="menu">I'm a menu!</li></ul>
</template>
if (Meteor.isClient) {
Restaurants = new Meteor.Collection;
Meteor.startup(function() {
Restaurants.insert({name: "Chinese"});
Restaurants.insert({name: "Thai"});
Restaurants.insert({name: "Japanese"});
Restaurants.insert({name: "Indonesian"});
});
Template.Restaurants.Restaurant = function() {
return Restaurants.find();
}
Template.Restaurants.restaurantSelected = function() {
// check whether this restaurant is selected. "this" refers to the current
// context, eg. the current restaurant in the loop
return Session.equals("restaurantSelected", this._id);
}
Template.Restaurants.events({
'click' : function (e) {
// store the current restaurant ID
// make sure the event selector is correct!
Session.set("restaurantSelected", this._id);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment