Display data from a collection when button is clicked in Meteor JS

Question

I have two collections FoodCategory(_id,Category) and FoodInfo (_id,Category,Cat_ID,FootItem,Cost).

I want to display FootItem and Cost when a user clicks a button showing Category from FoodCategory, I have displayed button showing Category but not getting around the concept of how to retrieve data from collection when button is clicked.

File 1. ManageFoodItem.html

<template name="manageFoodItems">
   <button type="button" class="btn btn-primary " id="updateNewItemBtn">Update Item</button>
   <div class="updateItemPanel">        
      {{#each catDisplay}}
          {{> manageFoodUpdateItemSection}}
      {{/each}}     
   </div>
</template>
<template name="manageFoodUpdateItemSection">
   <a class="btn btn-default expandCategory" href="#" role="button">{{Category}}</a>   
   <div id="categoryFoodItem">
      <!--This is where I want to display FootItem when Foot Category button with Class expandCategory is clicked-->
      {{FoodItem}}                                              
   </div>
</template>

ManageFoodItem.js

Template.manageFoodItems.helpers({
    catDisplay: function() {
        return FoodCategory.find({});
    }
});

ManageFoodUpdateItemSection.js

This template is in the file ManageFootItem.html:

Template.manageFoodUpdateItemSection.events({
    'click .expandCategory': function(evt, tmpl) {
        evt.preventDefault();
        var clikedFoodCatId = this._id;
        alert(clikedFoodCatId);
        Session.set("curFoodCatID", clikedFoodCatId);
        return FoodInfo.find({
            Cat_ID: clikedFoodCatId
        });
    }

});

Template.manageFoodUpdateItemSection.helpers({
    footItemDisplay: function() {
        var curFoodId = Session.set("curFoodCatID");
        curFoodId = "jZyBxkfEAHJrdaKJ6";
    }
});

footItemDisplay in helpers function can retrieve data from collection if I use for each but I want data to dispay when I click button showing {{Category}}.

Answer 1

You could use Session to store the current document's _id of FoodCategory and in further consequence react to click events. For example:

if (Meteor.isClient) {
    Template.manageFoodUpdateItemSection.helpers({
        currentFoodItem: function() {
            return Session.get('catId') == this._id;
        },
        FoodInfo: function() {
            return FoodInfo.find({"Cat_ID": Session.get('catId')});
        }
    });
    Template.manageFoodUpdateItemSection.events({
        'click .expandCategory': function() {
            Session.set('catId', this._id);
        }
    });
}

---

<template name="manageFoodUpdateItemSection">
    <a class="btn btn-default expandCategory" href="#" role="button">{{Category}}</a>
    {{#if currentFoodItem}}
        <div id="categoryFoodItem">
            {{#each FoodInfo}}
                {{FoodItem}}
            {{/each}}
        </div>
    {{/if}}
</template>