流星：スペースバーを使って2つのコレクションのデータを含むツリーリストを作成するにはどうすればよいですか？

Question

私は2つのコレクションを持っていると言います。 カテゴリのうちの1つとの1つアイテムです。

カテゴリーは次のようになります...

{ 
    _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>