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>

Meteor：如何使用Spacebars创建包含两个集合数据的树列表？

1 个答案: