What is the proper way to manipulate template instance in Meteor framework?

Question

I am new to Meteor and wondering how to solve what seems to me is a common problem.

Let's say I have a handlebars template listing restaurants:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}}
  {{/each}}
</template>

Now when user clicks on a restaurant template I want to display a menu for that restaurant.

I added a subtemplate named "menuItems" that contains all menu items for a given restaurant:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}} 
    {{> menuItems}}
  {{/each}}
</template>

I want to render only one instance of menuItems subtemplate when user clicks anywhere on Restaurant template (render only the menu items for the selected restaurant).

It should go something like:

Template.Restaurants.events({
'click' : function (e) {
       // This is where I need help - what's the right way to display only one subtemplate instance?
     }
});

My question is - how I can select and display only the correct menuItems template instance?

Also I would like to place menuItems template instance in DOM only after the click and not before (having all the menu items for all restaurants and only hiding those divs is not an option because of high number of those items in db).

If you think I should approach the solution in some other way please let me know, thanks!

Answer 1

You should use {{#if}} and Session. Like this:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}} 
    {{#if restaurantSelected}}
      {{> menuItems}}
    {{/if}}
  {{/each}}
</template>

By using Session, a reactive data source, you can set a global flag indicating whether a restaurant is selected.

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

Whenever you change that session key, the value will update and the template will be redrawn. So, you can toggle it when clicking a restaurant:

Template.Restaurants.events({
  'click' : function (e) {
    // store the current restaurant ID
    // make sure the event selector is correct!
    Session.set("restaurantSelected", this._id);
  }
});

Edit For clarity's sake I created a complete example that you can copy into your project and try out.