javascript - Meteor:如何使用空格键创建包含来自两个集合的数据的树列表？

Question

假设我有两个收藏。一个用于类别，一个用于项目。

类别看起来像这样......

{
    _id: "1",
    catName: "Category One"
}
{
    _id: "2",
    catName: "Category Two"
}

项目看起来像这样......

{
    _id: "12",
    itemName: "Item One",
    category: "1"
}
{
    _id: "13",
    itemName: "Item Two"
    category: "2"
}
{
    _id: "14",
    itemName: "Item Three"
    category: "1"
}

如何使用空格键创建一个树状列表，每个类别下都有相应的项目？

例如，像这样的东西......

HTML

<div class="panel-group">
   <div class="panel panel-default">

   {{#each category}}

     <div class="panel-heading">
       <a data-toggle="collapse" href="#collapse1">{{catName}}</a>
     </div>

     {{#if itemsInThisCategory}}
       <div id="collapse1" class="panel-collapse collapse">

         {{#each item}}
           <div class="panel-body">{{itemName}}</div>
         {{/each}}

       </div>
     {{/if}}

   {{/each}}

   </div>
</div>

帮助者将如何为此做？或者甚至可以这样做吗？因为我认为我正在尝试在同一个每个语句中访问不同的数据上下文，而且我不确定这是否可行。

谢谢

Answer 1

助手:

Template.myTemplate.helpers({
  categories: function() {
    return Categories.find({});
  },
  hasItemsInCategory: function(category) {
    return Items.find({
      category: category
    }).count();
  },
  getItemByCategory: function(category) {
    return Items.find({
      category: category
    });
  }
});

模板:

<template name="myTemplate">
  <div class="panel-group">
    <div class="panel panel-default">
      {{#each categories}}
        <div class="panel-heading"><a data-toggle="collapse" href="#collapse1">{{catName}}</a>
          {{#if hasItemsInCategory _id}}
            <div id="collapse1" class="panel-collapse collapse">
              {{#each getItemByCategory _id}}
                <div class="panel-body">{{itemName}}</div>
              {{/each}}
            </div>
          {{/if}}
        </div>
      {{/each}}
    </div>
  </div>
</template>