Meteor: Wie kann ich mithilfe von Leertasten eine Baumliste mit Daten aus zwei Sammlungen erstellen?

Question

Sagen wir, ich habe zwei Sammlungen. Eine für Kategorien und eine für Artikel.

Kategorien wie folgt aussieht ...

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

und Gegenstände wie folgt aussieht ...

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

Wie ich spacebars können Sie eine Baumliste mit den entsprechenden Artikel unter jeder Kategorie erstellen ?

Zum Beispiel so etwas wie dieses ...

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> 

Wie würden die Helfer dafür getan werden? Oder ist das überhaupt möglich? Weil ich glaube, dass ich versuche, innerhalb derselben Aussage auf verschiedene Datenkontexte zuzugreifen, und ich bin mir nicht sicher, ob das funktionieren wird.

Dank

Answer 1

Helfer:

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 
    }); 
    } 
}); 

Vorlage:

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