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

Question

我有两个合集 FoodCategory(_id,Category) 和 FoodInfo (_id,Category,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>

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

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

javascript

jquery

mongodb

meteor

meteor-helper

文件 1。ManageFoodItem.html

ManageFoodItem.js

ManageFoodUpdateItemSection.js