Meteor Handlebars Passing Previous Context Parameter to next {{#Each}} helper block

Question

Here are the templates in question:

<template name="tables">
    <div class="table-area">
        {{#each tableList}}
          {{> tableBox}}
        {{/each}}
    </div>
</template>

<template name="tableBox">
<table id="{{name}}" class="table table-condensed table-striped">
    <tr>
        <td>{{name}}</td>
        <td> Min:</td>
        <td>{{minBet}}</td>
        <td>{{cPlayers}}</td>
    </tr>
    <tr>
        <td>Dice1</td>
        <td>Dice2</td>
        <td>Dice3</td>
        <td>Total</td>
    </tr>
    {{#each table [{{name}}]}}
      {{> tableRow}}
    {{/each}}
    </table>
</template>

<template name="tableRow">
    <tr>
        <td>{{Roll.dice1}}</td>
        <td>{{Roll.dice2}}</td>
        <td>{{Roll.dice3}}</td>
        <td>{{Roll.total}}</td>
    </tr>
</template>

And here are the Meteor Handlebars functions:

Template.tables.tableList = function(){
    return Tables.find();
}

Template.tableBox.table = function(tableID){
    return Rolls.find({tableName: tableID});
}

The problem is each table that is rendered on screen has all the 'Rolls' listed (All 100 lines). Instead of being filtered for the parameter I am trying to pass through to the Roll template function which is the table name {{name}}.

In the "table id" tag of TableBox, the {{name}} gets converted correctly. i.e. "T1", "T2", "T3" etc. But it's that same TableID that i need to pass to the function to filter from the db query properly. Is there a way to do this more simply? I would like to stick to the handlebars templating way of doing things here if possible.

For reference below is the JSON initialisation code for the test data:

//initiate tables
for (i = 1; i < 11; i++) {
    Tables.insert({
        name: 'T' + i,
        minBet: '300',
        cPlayers: '(8)'
    });
}

//initiate rolls within tables
for (i = 1; i < 11; i++) {
for(j=1; j<11; j++){
var die1 = ((Math.floor(Math.random() * 5) +1).toString());
var die2 = ((Math.floor(Math.random() * 5) +1).toString());
var die3 = ((Math.floor(Math.random() * 5) +1).toString());
var t = (parseInt(die1) + parseInt(die2) + parseInt(die3)).toString();

Rolls.insert({
    Roll: {
        tableName: 'T' + i,
        rollNumber: j;
        dice1: die1,
        dice2: die2,
        dice3: die3,
        total: t
         },
      });
    }
}

Answer 1

Ok - After trial and error - figured it out:

In the helper function:

Template.tableBox.table = function(tableID){
    return Rolls.find({"Roll.tableName": tableID});
}

I needed to add the nested Roll.tableName property name but within brackets as the query.

And back in the tableBox template:

<template name="tableBox">
  <table id="{{name}}" class="table table-condensed table-striped">
    <tr>
        <td>{{name}}</td>
        <td> Min:</td>
        <td>{{minBet}}</td>
        <td>{{cPlayers}}</td>
    </tr>
    <tr>
        <td>Dice1</td>
        <td>Dice2</td>
        <td>Dice3</td>
        <td>Total</td>
    </tr>
    {{#each table name}}
      {{> tableRow}}
    {{/each}}
  </table>
</template>

No need for the curly braces for the 'Name' argument for the function. Somehow handlebars and Meteor recognise the context you are referring to without the curly braces and applies it like it is within {{name}} for the tableBox. I.e. "T1", "T2", "T3" are passed correctly to the function and now my unique tables only contain the list of rolls specific to individual tables.