Is there a way to accordion within a nested each loop based on the outer each loop?

Question

I have asked the question before to no avail however I have tried to implement a new strategy. I have a mongodb collection pieces that I'm pulling information from. Within the collection I also have an array parts that I need to access.

I have a nested {{#each in ...}} loop in order to display all of the items however the issue is wanting to accordion the inner loop based on the outer loop. Here is my code:

<template name="band">
    <div class="container" style="padding-top: 25px">                 
          <div class="table-responsive">
              <table class="table table-borderless table-light table-sm">
                <thead class="thead-light">
                    <tr>
                        <th>Title:</th>
                        <th>See the Music:</th>
                        <th>Hear the Music:</th>
                        <th>Instrumentation:</th>
                        <th>Price (per copy):</th>
                        <th>Quantity:</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each piece in pieces}}
                    <tr id ="{{piece.name}}" class="itemList table-warning">
                        <th class="name tText">{{piece.name}}</th>
                        <td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
                        <td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
                        <td class="format tText">{{piece.instrumentation}}</td>
                        <th class="price tText" >${{piece.price}}</th>
                        <td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
                    </tr>
                    <tr class="partsList">
                        <td colspan ="3">
                            <select class="form-control">
                                <option autofocus value ="hide">Hide {{piece.name}} Parts</option>
                                <option value ="show">Show {{piece.name}} Parts</option>
                            </select>
                        </td>
                    </tr>
                        {{#if showParts}}
                            {{#each part in piece.parts}}
                                {{>partList piece=piece part=part}}
                            {{/each}}
                        {{/if}}
                    {{/each}}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan ="5"></td>
                        <td><button class = "button addItems">Add to Cart</button></td>
                    </tr>
                </tfoot>
            </table>
            </div> 
          </div>  

<template name="partList">
    <tr class="{{piece.name}}">
            <td colspan="3"></td>
            <td class="pname tText">{{piece.name}}: {{part.pname}}</td>
            <td class="price tText">${{part.pprice}}</td>
            <td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
        </tr>

And my js

Template.band.events({'change select': function(event, template){
    if($(event.target).val()=="show"){
        template.showParts.set(true)
    }else{
        template.showParts.set(false);
    }
})}

Template.band.onCreated( function(){
Meteor.subscribe('bandList');
this.showParts = new ReactiveVar(false);});


Template.band.helpers({
pieces: function(){
    return bandmusic.find({},{sort:{name:1}}).fetch()
},
showParts: function(){
    return Template.instance().showParts.get()
}});

Everything functions fine but every single <template name="partList"> toggles when the <select> option is chosen.

Is there a way to add a condition to the spacebars to only toggle based on _id of the outer {{#each}} loop? Or something similar given the logic I've used.

Answer 1

You can set the id to the reactive-var and get it in the if condition to achieve the result you wanted.

HTML

{{#each piece in pieces}}
    ....
    <tr class="partsList">
        <td colspan ="3">
            <select data-id={{_id}} class="form-control">
                <option autofocus value ="hide">Hide {{piece.name}} Parts</option>
                <option value ="show">Show {{piece.name}} Parts</option>
            </select>
        </td>
    </tr>
    {{#if showParts _id}}
        {{#each part in piece.parts}}
            {{>partList piece=piece part=part}}
        {{/each}}
    {{/if}}
    ....
{{/each}}

JS

Template.band.helpers({
    showParts(_id) {
        const selectedId = Template.instance().showParts.get();
        return selectedId && _id == selectedId;
    }
}
Template.band.events({
    'change select'(event, template) {
        if (event.currentTarget.value == "show") {
            const _id = event.currentTarget.dataset.id;
            template.showParts.set(_id);
        } else {
            template.showParts.set(null);
        }
    }
});