流星：我如何使用Spacebars來創建一個樹列表與兩個集合的數據？

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" 
} 

如何使用spacebars創建一個目錄樹，每個類別下的相應項目？

例如，這樣的事情...

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>