javascript - 在 Meteor JS 中单击按钮时显示集合中的数据

Question

我有两个集合 FoodCategory(_id,Cat​​egory) 和 FoodInfo (_id,Cat​​egory,Cat_ID,FootItem,Cost)。

我想在用户单击显示 FoodCategory 中的 Category 的按钮时显示 FootItem 和 Cost，我显示了显示类别的按钮，但没有解决单击按钮时如何从集合中检索数据的概念。

文件 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

此模板位于文件 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 在 helpers 函数中可以从集合中检索数据，如果我使用每个，但我希望在单击显示 {{Category}} 的按钮时显示数据。

Answer 1

你可以使用 Session存储当前文档的 _id 的 FoodCategory 并进一步响应点击事件。例如:

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>